Foundation Icon
Foundation provides 283 icons, you can define the size of its style using css.
Icons can be used for text, buttons, toolbars, navigation, forms, and so on.
The following are examples of icons Foundation:
Refresh button:
Detection icon:
Home icon:
Syntax icon
Create icons syntax is as follows:
<i class="fi-name"></i>
Replace icon name part of the name.
To use an icon we need the <head> section to add the icon style file:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Icon Examples
The following examples demonstrate the use of icons:
Examples
<P> Cloud icon as a link :
<A href = "#"> <i class = "fi-cloud"> </ i> </ a>
</ P>
<P> Styled Cloud icon: < i class = "fi-cloud" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> Home icon: <i class = "fi-home"> </ i> </ p>
<P> Home icon on a button :
<Button type = "button" class = "button">
<I class = "fi-home "> </ i> Home
</ Button>
</ P>
<P> Home icon on a green button:
<Button type = "button" class = "button success">
<I class = "fi-home "> </ i> Home
</ Button>
</ P>
<P> Home icon on a large , light blue link button:
<A href = "#" class = "button info large">
<I class = "fi-home "> </ i> Home
</ A>
</ P>
try it"
Toolbar icons
We can use .icon-bar class to create a specified number of toolbar icons:
Examples
<A href = "#" class = "item">
<I class = "fi-home "> </ i>
</ A>
<A href = "#" class = "item">
<I class = "fi-bookmark "> </ i>
</ A>
<A href = "#" class = "item">
<I class = "fi-info "> </ i>
</ A>
<A href = "#" class = "item">
<I class = "fi-mail "> </ i>
</ A>
<A href = "#" class = "item">
<I class = "fi-like "> </ i>
</ A>
</ Div>
try it"
Icon Description Use <label> element:
Examples
<A href = "#" class = "item">
<I class = "fi-home "> </ i>
<Label> Home </ label>
</ A>
<A href = "#" class = "item">
<I class = "fi-share "> </ i>
<Label> Share </ label>
</ A>
<A href = "#" class = "item">
<I class = "fi-info "> </ i>
<Label> Info </ label>
</ A>
<A href = "#" class = "item">
<I class = "fi-mail "> </ i>
<Label> Mail </ label>
</ A>
<A href = "#" class = "item">
<I class = "fi-magnifying -glass"> </ i>
<Label> Search </ label>
</ A>
</ Div>
.disabled class lets become not clickable icon status:
Examples
<I class = "fi-share "> </ i>
</ A>
<A href = "#" class = "item disabled">
<I class = "fi-mail "> </ i>
</ A>
try it"
.vertical class is used to create a vertical toolbar:
Foundation Icon Reference Manual
More about the contents of the icon, you can refer to our Foundation icon manual.