简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

characters

Foundation 图标

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

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

图标语法

创建图标语法格式如下:

<i class="fi-name"></i>

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

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

<link rel="stylesheet" href="http://static.shouce.ren/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 图标手册。

关于我们联系我们留言板

手册网

Previous article： Next article：