The best Foundation Icon Tutorial In 2024, In this tutorial you can learn
Syntax icon,Icon Examples,Toolbar icons,Foundation Icon Reference Manual,
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: <i class = "fi-cloud"> </ i> </ p>
<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
<Div class = "icon-bar five-up">
<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
<Div class = "icon-bar five-up">
<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
<A href = "#" class = "item disabled">
<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
<Div class = "icon-bar vertical five-up">
/en/en
</ Div>
Foundation Icon Reference Manual
More about the contents of the icon, you can refer to our Foundation icon manual.