垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 图标 ​

Foundation 框架本身不包含图标库，但可以很容易地与各种图标库集成。本章将介绍如何在 Foundation 中使用图标，包括 Foundation Icon Fonts 3 和其他流行的图标库。

Foundation Icon Fonts 3 ​

Foundation Icon Fonts 3 是 ZURB 官方提供的图标字体库，包含数百个常用图标。

安装 Foundation Icons ​

方法一：CDN 引入 ​

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">

方法二：下载安装 ​

  1. 从 Zurb Foundation Icons 下载
  2. 将文件解压到项目目录
  3. 引入 CSS 文件
html
<link rel="stylesheet" href="css/foundation-icons.css">

基本用法 ​

使用 <i> 标签和 fi- 前缀的类名：

html
<i class="fi-home"></i> 首页
<i class="fi-mail"></i> 邮件
<i class="fi-heart"></i> 收藏
<i class="fi-star"></i> 评分

常用图标列表 ​

类名图标描述
fi-home🏠首页
fi-mail✉️邮件
fi-heart❤️心形
fi-star⭐星星
fi-magnifying-glass🔍搜索
fi-plus➕添加
fi-minus➖减少
fi-x✖️关闭
fi-check✓确认
fi-arrow-right→右箭头
fi-arrow-left←左箭头
fi-upload⬆️上传
fi-download⬇️下载
fi-trash🗑️删除
fi-pencil✏️编辑
fi-widget⚙️设置
fi-lock🔒锁定
fi-unlock🔓解锁
fi-social-facebookfFacebook
fi-social-twittertTwitter

图标尺寸 ​

通过 CSS 控制图标大小：

html
<style>
    .icon-small { font-size: 12px; }
    .icon-medium { font-size: 24px; }
    .icon-large { font-size: 36px; }
    .icon-xlarge { font-size: 48px; }
</style>

<i class="fi-home icon-small"></i>
<i class="fi-home icon-medium"></i>
<i class="fi-home icon-large"></i>
<i class="fi-home icon-xlarge"></i>

图标颜色 ​

通过 CSS color 属性设置颜色：

html
<style>
    .icon-primary { color: #1779ba; }
    .icon-success { color: #3adb76; }
    .icon-warning { color: #ffae00; }
    .icon-alert { color: #cc4b37; }
</style>

<i class="fi-heart icon-primary"></i>
<i class="fi-heart icon-success"></i>
<i class="fi-heart icon-warning"></i>
<i class="fi-heart icon-alert"></i>

使用 Font Awesome ​

Font Awesome 是最流行的图标库之一，拥有丰富的图标选择。

安装 Font Awesome ​

html
<!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- 或 Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

基本用法 ​

html
<!-- 实心图标 -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>

<!-- 线性图标 -->
<i class="far fa-heart"></i>
<i class="far fa-star"></i>

<!-- 品牌图标 -->
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>

Font Awesome 尺寸类 ​

html
<i class="fas fa-home fa-xs"></i>    <!-- 0.75em -->
<i class="fas fa-home fa-sm"></i>    <!-- 0.875em -->
<i class="fas fa-home"></i>          <!-- 1em -->
<i class="fas fa-home fa-lg"></i>    <!-- 1.33em -->
<i class="fas fa-home fa-2x"></i>    <!-- 2em -->
<i class="fas fa-home fa-3x"></i>    <!-- 3em -->
<i class="fas fa-home fa-5x"></i>    <!-- 5em -->
<i class="fas fa-home fa-7x"></i>    <!-- 7em -->
<i class="fas fa-home fa-10x"></i>   <!-- 10em -->

图标与按钮结合 ​

带图标的按钮 ​

html
<a class="button" href="#">
    <i class="fi-home"></i> 首页
</a>

<a class="button success" href="#">
    <i class="fi-check"></i> 确认
</a>

<a class="button alert" href="#">
    <i class="fi-trash"></i> 删除
</a>

纯图标按钮 ​

html
<a class="button" href="#" aria-label="首页">
    <i class="fi-home"></i>
</a>

<a class="button secondary" href="#" aria-label="设置">
    <i class="fi-widget"></i>
</a>

<a class="button alert" href="#" aria-label="删除">
    <i class="fi-trash"></i>
</a>

图标按钮组 ​

html
<div class="button-group">
    <a class="button secondary" aria-label="加粗"><i class="fi-bold"></i></a>
    <a class="button secondary" aria-label="斜体"><i class="fi-italic"></i></a>
    <a class="button secondary" aria-label="下划线"><i class="fi-underline"></i></a>
</div>

图标与表单结合 ​

输入框前置图标 ​

html
<div class="input-group">
    <span class="input-group-label">
        <i class="fi-mail"></i>
    </span>
    <input class="input-group-field" type="email" placeholder="输入邮箱">
</div>

<div class="input-group">
    <span class="input-group-label">
        <i class="fi-lock"></i>
    </span>
    <input class="input-group-field" type="password" placeholder="输入密码">
</div>

<div class="input-group">
    <span class="input-group-label">
        <i class="fi-magnifying-glass"></i>
    </span>
    <input class="input-group-field" type="search" placeholder="搜索...">
    <div class="input-group-button">
        <button class="button" type="submit">搜索</button>
    </div>
</div>

图标与导航结合 ​

导航菜单图标 ​

html
<ul class="menu">
    <li><a href="#"><i class="fi-home"></i> 首页</a></li>
    <li><a href="#"><i class="fi-page"></i> 文章</a></li>
    <li><a href="#"><i class="fi-photo"></i> 相册</a></li>
    <li><a href="#"><i class="fi-mail"></i> 联系</a></li>
</ul>

垂直导航带图标 ​

html
<ul class="vertical menu">
    <li><a href="#"><i class="fi-home"></i> 首页</a></li>
    <li><a href="#"><i class="fi-torso"></i> 个人资料</a></li>
    <li><a href="#"><i class="fi-widget"></i> 设置</a></li>
    <li><a href="#"><i class="fi-power"></i> 退出</a></li>
</ul>

图标动画 ​

旋转图标 ​

html
<style>
    .icon-spin {
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>

<i class="fi-loop icon-spin"></i> 加载中...

脉冲图标 ​

html
<style>
    .icon-pulse {
        animation: pulse 1s ease-in-out infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
</style>

<i class="fi-heart icon-pulse" style="color: red;"></i>

Font Awesome 动画类 ​

html
<!-- 旋转 -->
<i class="fas fa-spinner fa-spin"></i>

<!-- 脉冲旋转 -->
<i class="fas fa-spinner fa-pulse"></i>

图标堆叠 ​

Font Awesome 堆叠 ​

html
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

社交媒体图标 ​

html
<div class="social-icons">
    <a href="#" class="button hollow" aria-label="Facebook">
        <i class="fi-social-facebook"></i>
    </a>
    <a href="#" class="button hollow" aria-label="Twitter">
        <i class="fi-social-twitter"></i>
    </a>
    <a href="#" class="button hollow" aria-label="LinkedIn">
        <i class="fi-social-linkedin"></i>
    </a>
    <a href="#" class="button hollow" aria-label="GitHub">
        <i class="fi-social-github"></i>
    </a>
</div>

<style>
    .social-icons .button {
        margin: 0 5px;
        font-size: 24px;
    }
</style>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 图标示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .icon-demo { font-size: 24px; margin: 10px; display: inline-block; }
        .icon-demo i { margin-right: 5px; }
        .demo-section { margin-bottom: 30px; }
        .icon-grid { display: flex; flex-wrap: wrap; }
        .icon-item {
            width: 120px;
            text-align: center;
            padding: 15px;
            margin: 5px;
            background: #f4f4f4;
            border-radius: 4px;
        }
        .icon-item i { font-size: 32px; display: block; margin-bottom: 10px; }
        .icon-item span { font-size: 12px; color: #666; }
        .icon-spin { animation: spin 2s linear infinite; }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 图标展示</h1>

        <div class="demo-section">
            <h2>Foundation Icons</h2>
            <div class="icon-grid">
                <div class="icon-item">
                    <i class="fi-home"></i>
                    <span>fi-home</span>
                </div>
                <div class="icon-item">
                    <i class="fi-mail"></i>
                    <span>fi-mail</span>
                </div>
                <div class="icon-item">
                    <i class="fi-heart"></i>
                    <span>fi-heart</span>
                </div>
                <div class="icon-item">
                    <i class="fi-star"></i>
                    <span>fi-star</span>
                </div>
                <div class="icon-item">
                    <i class="fi-magnifying-glass"></i>
                    <span>fi-magnifying-glass</span>
                </div>
                <div class="icon-item">
                    <i class="fi-widget"></i>
                    <span>fi-widget</span>
                </div>
                <div class="icon-item">
                    <i class="fi-trash"></i>
                    <span>fi-trash</span>
                </div>
                <div class="icon-item">
                    <i class="fi-pencil"></i>
                    <span>fi-pencil</span>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>图标尺寸</h2>
            <i class="fi-home" style="font-size: 16px;"></i>
            <i class="fi-home" style="font-size: 24px;"></i>
            <i class="fi-home" style="font-size: 32px;"></i>
            <i class="fi-home" style="font-size: 48px;"></i>
            <i class="fi-home" style="font-size: 64px;"></i>
        </div>

        <div class="demo-section">
            <h2>图标颜色</h2>
            <i class="fi-heart" style="font-size: 32px; color: #1779ba;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #3adb76;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #ffae00;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #cc4b37;"></i>
        </div>

        <div class="demo-section">
            <h2>带图标的按钮</h2>
            <a class="button" href="#"><i class="fi-home"></i> 首页</a>
            <a class="button success" href="#"><i class="fi-check"></i> 保存</a>
            <a class="button warning" href="#"><i class="fi-pencil"></i> 编辑</a>
            <a class="button alert" href="#"><i class="fi-trash"></i> 删除</a>
        </div>

        <div class="demo-section">
            <h2>图标按钮组</h2>
            <div class="button-group">
                <a class="button secondary"><i class="fi-bold"></i></a>
                <a class="button secondary"><i class="fi-italic"></i></a>
                <a class="button secondary"><i class="fi-underline"></i></a>
            </div>
            &nbsp;
            <div class="button-group">
                <a class="button secondary"><i class="fi-align-left"></i></a>
                <a class="button secondary"><i class="fi-align-center"></i></a>
                <a class="button secondary"><i class="fi-align-right"></i></a>
            </div>
        </div>

        <div class="demo-section">
            <h2>表单图标</h2>
            <div class="input-group">
                <span class="input-group-label"><i class="fi-mail"></i></span>
                <input class="input-group-field" type="email" placeholder="输入邮箱">
            </div>
            <div class="input-group">
                <span class="input-group-label"><i class="fi-lock"></i></span>
                <input class="input-group-field" type="password" placeholder="输入密码">
            </div>
        </div>

        <div class="demo-section">
            <h2>动画图标</h2>
            <i class="fi-loop icon-spin" style="font-size: 32px;"></i>
            <span style="margin-left: 10px;">加载中...</span>
        </div>

        <div class="demo-section">
            <h2>Font Awesome 图标</h2>
            <i class="fas fa-home fa-2x"></i>
            <i class="fas fa-user fa-2x"></i>
            <i class="fas fa-cog fa-2x"></i>
            <i class="far fa-heart fa-2x"></i>
            <i class="fab fa-github fa-2x"></i>
            <i class="fas fa-spinner fa-spin fa-2x"></i>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

图标最佳实践 ​

  1. 可访问性：始终为纯图标元素添加 aria-label 或 title 属性
  2. 装饰性图标：装饰性图标应添加 aria-hidden="true"
  3. 语义化：选择与功能相匹配的图标
  4. 一致性：在整个项目中使用同一套图标库
  5. 性能：只引入需要的图标，考虑使用 SVG 图标
html
<!-- 功能性图标 - 需要可访问性 -->
<button aria-label="删除项目">
    <i class="fi-trash" aria-hidden="true"></i>
</button>

<!-- 装饰性图标 - 隐藏于屏幕阅读器 -->
<a href="#">
    <i class="fi-mail" aria-hidden="true"></i> 发送邮件
</a>

总结 ​

本章我们学习了：

  • Foundation Icon Fonts 3 的安装和使用
  • Font Awesome 图标库的集成
  • 图标尺寸和颜色的控制
  • 图标与按钮、表单、导航的结合
  • 图标动画效果
  • 图标的可访问性最佳实践

下一章，我们将学习 Foundation 标签。

提示：选择图标库时，考虑项目需求、文件大小和维护成本。对于小型项目，可以考虑使用 SVG 图标减少 HTTP 请求。