图标可用于文本、按钮、工具栏、导航栏、表单等。

以下是Foundation 图标的示例：

刷新按钮：

检测图标：

主页图标：

图标语法

创建图标的语法格式如下：

将i class=\’fi-name\’/iname 部分替换为图标的名称。

要使用图标，我们需要在head 部分添加图标的样式文件：

link rel=\’stylesheet\’ href=\’http://static.runoob.com/assets/foundation-icons/foundation-icons.css\’图标示例

下面演示使用图标：的例子

例子

pCloud icon: i class=\’fi-cloud\’/i/p

pCloud 图标作为链接：

a href=\’#\’i class=\’fi-cloud\’/i/a

/p

pStyled Cloud icon: i class=\’fi-cloud\’ style=\’font-size:35px;color:red;\’/i/p

pHome icon: i class=\’fi-home\’/i/p

按钮上的pHome 图标：

按钮类型=\’按钮\’类=\’按钮\’

i 类=\’fi-home\’/i 家

/按钮

/p

绿色按钮上的pHome 图标：

按钮类型=\’按钮\’类=\’按钮成功\’

i 类=\’fi-home\’/i 家

/按钮

/p

浅蓝色大链接按钮上的pHome 图标：

a href=\’#\’ class=\’按钮信息大\’

i 类=\’fi-home\’/i 家

/一个

/p

工具栏图标

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

例子

div class=\’图标栏五上\’

a href=\’#\’ class=\’item\’

i 类=\’fi-home\’/i

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-书签\’/i

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-info\’/i

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-mail\’/i

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-like\’/i

/一个

/div

图标描述使用标签元素：

例子

div class=\’图标栏五上\’

a href=\’#\’ class=\’item\’

i 类=\’fi-home\’/i

label主页/label

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-share\’/i

label分享/标签

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-info\’/i

标签信息/标签

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-mail\’/i

标签邮件/标签

/一个

a href=\’#\’ class=\’item\’

i 类=\’fi-放大镜\’/i

标签搜索/标签

/一个

/div

.disabled 类可以使图标不可点击：

例子

a href=\’#\’ class=\’项目已禁用\’

i 类=\’fi-share\’/i

/一个

a href=\’#\’ class=\’项目已禁用\’

i 类=\’fi-mail\’/i

/一个

尝试一下»

.vertical 类用于创建垂直工具栏：

例子

div class=\’图标栏垂直五向上\’

.