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.w3write.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>
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>
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>
.vertical
class is used to create a vertical toolbar:
Examples
/en/en
</ Div>
Foundation Icon Reference Manual
More about the contents of the icon, you can refer to our Foundation icon manual.