Foundation 中文手册 /Foundation 图标

Foundation 图标

Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。

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


图标语法

创建图标语法格式如下:

name部分替换为图标的名字。

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


Icon 实例

以下演示了使用图标的实例:

实例

   Foundation 实例        

图标实例

Cloud icon:

Cloud icon as a link:

Styled Cloud icon:

Home icon:

Home icon on a button:

Home icon on a green button:

Home icon on a large, light blue link button: Home


运行实例 »

点击 "运行实例" 按钮查看在线实例


工具条图标

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

实例

   Foundation 实例        

Icon Bar


运行实例 »

点击 "运行实例" 按钮查看在线实例

图标描述使用元素:

实例

   Foundation 实例        

图标工具栏


运行实例 »

点击 "运行实例" 按钮查看在线实例

.disabled类可以让图标变成不可点击状态:

实例

   Foundation 实例        

图标工具栏


运行实例 »

点击 "运行实例" 按钮查看在线实例

.vertical类用于创建一个垂直的工具栏:

实例

   Foundation 实例        

图标工具栏


运行实例 »

点击 "运行实例" 按钮查看在线实例


Foundation 图标参考手册

更多关于图标的内容,可以参考我们的Foundation 图标手册。