Foundation provides 283 icons, and you can use css to define its style dimensions.
Icons can be used for text, buttons, sidebars, navigation bars, forms, etc.
The following is an example of the Foundation icon:
Refresh button:
Test icon:
Home page icon: The syntax format for creating icons is as follows: name Partially replace with the name of the icon. To use icons, we need to add a style file for icons in the < head > section: The following shows an example of using icons: We can use it. The icon describes the use of For more information about icons, please refer to our Foundation 图标手册。 8.7.1. Icon syntax ¶
<i class="fi-name"></i>
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
8.7.2. Icon instance ¶
Example ¶
<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>
8.7.3. Toolbar icon ¶
.icon-bar
Class to create a specified number of toolbar icons:Example ¶
<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>
<label>
Elements:Example ¶
<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 can make the icon unclickable:Example ¶
<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:Example ¶
<div class="icon-bar vertical five-up">
....
</div>
8.7.4. Foundation Icon reference Manual ¶