Foundation icon
May 04, 2021 Foundation5
Table of contents
Foundation icon
Foundation provides 283 icons that you can use to define its style size.
Icons can be used for text, buttons, toolbars, navigation bars, forms, etc.
Here's an example of the Foundation icon:
Refresh button:
Detection icon:
Home icon:
Icon syntax
The creating icon syntax format is as follows:
<i class="fi-name"></i>
The name section is replaced by the name of the icon.
To use icons we need to add a style file of icons in the section of slt;head&
<link rel="stylesheet" href="http://statics.w3cschool.cn/assets/foundation-icons/foundation-icons.css">
Icon instance
Here's an example of using icons:
Instance
< 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 >
尝试一下 »
工具条图标
我们可以使用
.icon-bar
类来创建一个指定数量的工具栏图标:
Instance
< 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>
元素:
Instance
< 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
类可以让图标变成不可点击状态：
Instance
< 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:
Foundation icon reference manual
For more information about icons, please refer to our Foundation Icons manual.