Foundation icon


May 04, 2021 11:00 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: Foundation icon

Detection icon: Foundation icon

Home icon: Foundation 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: < 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 >

尝试一下 »

工具条图标

我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标:

Instance

< 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> 元素:

Instance

< 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 类可以让图标变成不可点击状态:

Instance

< 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:

Instance

< div class= "icon-bar vertical five-up" >
....
< /div >

尝试一下 »

Foundation icon reference manual

For more information about icons, please refer to our Foundation Icons manual.