Foundation 字体图标与工具栏 - Foundation教程

一、Foundation 字体图标概述

Foundation 自带一套字体图标库，共提供 283 个图标。图标本质是字体，可以使用 CSS 控制大小、颜色等样式。

图标可用于：

文本内容
按钮
工具栏
导航栏
表单元素

图标使用语法

<i class="fi-*****"></i>Code language: HTML, XML (xml)

将 ***** 替换为对应图标名称即可。

二、引入字体图标

使用字体图标前，需要先引入 foundation-icons.css 文件：

<link href="foundation-icons/foundation-icons.css" rel="stylesheet" />Code language: HTML, XML (xml)

字体图标文件需单独下载：

下载地址：https://zurb.com/playground/uploads/upload/upload/288/foundation-icons.zip
官方图标列表参考：https://zurb.com/playground/foundation-icon-fonts-3

三、基础图标使用示例

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

<button type="button" class="button">
    <i class="fi-home"></i> 主页
</button>Code language: HTML, XML (xml)

四、工具栏图标（Icon Bar）

使用 .icon-bar 类配合 *-up 类（如 five-up）创建指定数量的工具栏图标。

纯图标工具栏（无文字）

<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>Code language: HTML, XML (xml)

带图标和文字的工具栏

<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>Code language: HTML, XML (xml)

五、禁用状态工具栏项

使用 .disabled 类让工具栏中的某个图标变为不可点击状态：

<div class="row">
    <div class="medium-12 columns">
        <div class="icon-bar five-up">
            <a href="#" class="item disabled">
                <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>
    </div>
</div>Code language: HTML, XML (xml)

六、垂直工具栏

使用 .vertical 类创建垂直排列的工具栏：

<div class="icon-bar five-up vertical">
    <a href="#" class="item disabled">
        <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>Code language: HTML, XML (xml)

七、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 字体图标与工具栏</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <link href="foundation-icons/foundation-icons.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .icon-bar {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>基础图标</h3>
        <i class="fi-heart" style="font-size: 24px; color: #f04124;"></i>

        <button type="button" class="button">
            <i class="fi-home"></i> 主页
        </button>

        <hr />

        <h3>纯图标工具栏</h3>
        <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>

        <h3>带文字的工具栏</h3>
        <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>

        <h3>禁用状态</h3>
        <div class="icon-bar five-up">
            <a href="#" class="item disabled">
                <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>

        <h3>垂直工具栏</h3>
        <div class="icon-bar five-up vertical">
            <a href="#" class="item disabled">
                <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>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)