后浪云Foundation教程：Foundation 图标
Foundation 图标
Foundation 提供了 283 个图标，你可以使用css来定义它的样式尺寸。
图标可用于文本，按钮，工具条，导航栏，表单等。
以下是 Foundation 图标的实例：
刷新按钮:
检测图标:
主页图标:
图标语法
创建图标语法格式如下:
<i class="fi-name"></i>
name 部分替换为图标的名字。
要使用图标我们需要在 <head> 部分添加图标的样式文件：
<link rel="stylesheet" href="http://static.IDC.NET/assets/foundation-icons/foundation-icons.css">
Icon 实例
以下演示了使用图标的实例:
实例
<
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 类来创建一个指定数量的工具栏图标:
实例
<
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> 元素:
实例
<
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 类可以让图标变成不可点击状态：
实例
<
a
href=
"#"
class=
"item disabled"
>
<
i
class=
"fi-share"
>
<
/i
>
<
/a
>
<
a
href=
"#"
class=
"item disabled"
>
<
i
class=
"fi-mail"
>
<
/i
>
<
/a
>
尝试一下 »
.vertical 类用于创建一个垂直的工具栏：
实例
<
div
class=
"icon-bar vertical five-up"
>
....
<
/div
>
尝试一下 »
Foundation 图标参考手册
更多关于图标的内容，可以参考我们的 Foundation 图标手册。