Font Awesome 教程

Font Awesome 图标

Font Awesome 是目前最流行的图标字体库,提供 1500+ 个矢量图标,可通过 CSS 类轻松使用,无需图片文件。它广泛用于网页按钮、导航、社交分享等场景。

1. 引入方式

<!-- CDN 方式 -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 基本用法

<i class="fa-solid fa-house"></i>    <!-- 房子 -->
<i class="fa-solid fa-user"></i>     <!-- 用户 -->
<i class="fa-solid fa-heart"></i>    <!-- 心形 -->

<!-- 也可以用于 span、a 等标签 -->
<a href="#"><i class="fa-solid fa-download"></i> 下载</a>

3. 版本说明

版本	前缀	说明
Font Awesome 6(免费)	fa-solid / fa-regular / fa-brands	免费版 2000+ 图标
Font Awesome 5	fas / far / fab	经典前缀
Font Awesome 4	fa	旧版,单前缀

4. 图标风格

<!-- 实心(solid) -->
<i class="fa-solid fa-star"></i>

<!-- 规则(regular,需 pro 或免费子集) -->
<i class="fa-regular fa-star"></i>

<!-- 品牌(brands) -->
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-twitter"></i>

5. 在线图标库

访问 fontawesome.com/icons 可搜索全部图标名称,点击任意图标即可复制 HTML 代码。

Font Awesome 品牌图标

品牌图标(Brands)用于展示各类科技公司、社交平台的 Logo,统一使用 fa-brands 前缀。

1. 常用品牌图标

<!-- 社交平台 -->
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-whatsapp"></i>
<i class="fa-brands fa-weixin"></i>
<i class="fa-brands fa-weibo"></i>
<i class="fa-brands fa-telegram"></i>

<!-- 开发者平台 -->
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-gitlab"></i>
<i class="fa-brands fa-stack-overflow"></i>
<i class="fa-brands fa-codepen"></i>
<i class="fa-brands fa-js"></i>
<i class="fa-brands fa-python"></i>
<i class="fa-brands fa-java"></i>

<!-- 科技公司 -->
<i class="fa-brands fa-apple"></i>
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-microsoft"></i>
<i class="fa-brands fa-amazon"></i>
<i class="fa-brands fa-alipay"></i>

2. 品牌图标列表页

<div class="brand-list">
  <i class="fa-brands fa-github fa-2x"></i>
  <i class="fa-brands fa-google fa-2x"></i>
  <i class="fa-brands fa-apple fa-2x"></i>
</div>

3. 版权提醒

品牌图标仅用于指代对应品牌,不意味着背书。商业使用请遵守各品牌的商标规范。

Font Awesome 图表图标

图表图标用于展示数据分析、统计报表、可视化场景。

1. 常用图表图标

<!-- 柱状图 -->
<i class="fa-solid fa-chart-bar"></i>

<!-- 折线图 -->
<i class="fa-solid fa-chart-line"></i>

<!-- 饼图 -->
<i class="fa-solid fa-chart-pie"></i>

<!-- 面积图/区域图 -->
<i class="fa-solid fa-chart-area"></i>

<!-- 散点图 -->
<i class="fa-solid fa-chart-scatter"></i>

<!-- 数据表 -->
<i class="fa-solid fa-table"></i>

<!-- 数据/统计 -->
<i class="fa-solid fa-chart-simple"></i>
<i class="fa-solid fa-chart-gantt"></i>

2. 仪表盘应用

<div class="stat-card">
  <i class="fa-solid fa-chart-line"></i>
  <h3>销售额</h3>
  <p>¥128,000</p>
</div>

<div class="stat-card">
  <i class="fa-solid fa-chart-pie"></i>
  <h3>市场份额</h3>
  <p>32.5%</p>
</div>

3. 图表类型选择建议

趋势变化 → fa-chart-line(折线)
分类对比 → fa-chart-bar(柱状)
占比分布 → fa-chart-pie(饼图)
数据明细 → fa-table(表格)

Font Awesome 货币图标

货币图标用于电商、金融、支付场景,展示金额与币种。

1. 各国货币图标

<!-- 通用货币符号 -->
<i class="fa-solid fa-dollar-sign"></i>   <!-- $ -->
<i class="fa-solid fa-euro-sign"></i>     <!-- € -->
<i class="fa-solid fa-pound-sign"></i>   <!-- £ -->
<i class="fa-solid fa-yen-sign"></i>     <!-- ¥ -->
<i class="fa-solid fa-ruble-sign"></i>   <!-- ₽ -->
<i class="fa-solid fa-bitcoin-sign"></i> <!-- ₿ -->

<!-- 比特币 -->
<i class="fa-brands fa-bitcoin"></i>

<!-- 支付相关 -->
<i class="fa-solid fa-money-bill"></i>        <!-- 纸币 -->
<i class="fa-solid fa-money-bill-wave"></i>   <!-- 波浪纸币 -->
<i class="fa-solid fa-coins"></i>            <!-- 硬币堆 -->
<i class="fa-solid fa-credit-card"></i>      <!-- 信用卡 -->
<i class="fa-solid fa-wallet"></i>           <!-- 钱包 -->
<i class="fa-solid fa-sack-dollar"></i>      <!-- 钱袋 -->
<i class="fa-solid fa-circle-dollar"></i>    <!-- 圆形美元 -->

2. 价格展示示例

<div class="price">
  <i class="fa-solid fa-yen-sign"></i> 128.00
</div>

<div class="payment-method">
  <i class="fa-solid fa-credit-card"></i> 银行卡
  <i class="fa-solid fa-wallet"></i> 余额支付
</div>

3. 财务统计卡片

<div class="card">
  <i class="fa-solid fa-sack-dollar"></i>
  <span>本月收入 ¥56,000</span>
</div>

<div class="card">
  <i class="fa-solid fa-coins"></i>
  <span>账户余额 ¥12,800</span>
</div>

Font Awesome 方向图标

方向图标用于导航、箭头指示、滑动操作等场景。

1. 箭头图标

<!-- 基本箭头 -->
<i class="fa-solid fa-arrow-left"></i>
<i class="fa-solid fa-arrow-right"></i>
<i class="fa-solid fa-arrow-up"></i>
<i class="fa-solid fa-arrow-down"></i>

<!-- 小箭头(chevron) -->
<i class="fa-solid fa-chevron-left"></i>
<i class="fa-solid fa-chevron-right"></i>
<i class="fa-solid fa-chevron-up"></i>
<i class="fa-solid fa-chevron-down"></i>

<!-- 双箭头 -->
<i class="fa-solid fa-angles-left"></i>
<i class="fa-solid fa-angles-right"></i>
<i class="fa-solid fa-angles-up"></i>
<i class="fa-solid fa-angles-down"></i>

<!-- 长箭头 -->
<i class="fa-solid fa-arrow-right-long"></i>

<!-- 循环箭头 -->
<i class="fa-solid fa-rotate"></i>
<i class="fa-solid fa-rotate-left"></i>
<i class="fa-solid fa-rotate-right"></i>

2. 指示图标

<!-- 位置指示 -->
<i class="fa-solid fa-location-arrow"></i>   <!-- 定位箭头 -->
<i class="fa-solid fa-location-dot"></i>     <!-- 位置点 -->
<i class="fa-solid fa-compass"></i>         <!-- 指南针 -->

<!-- 方向标 -->
<i class="fa-solid fa-up-long"></i>
<i class="fa-solid fa-right-long"></i>

<!-- 手势滑动 -->
<i class="fa-solid fa-hand-point-left"></i>
<i class="fa-solid fa-hand-point-right"></i>

3. 导航应用

<!-- 分页器 -->
<div class="pagination">
  <a href="#"><i class="fa-solid fa-angles-left"></i></a>
  <a href="#"><i class="fa-solid fa-chevron-left"></i></a>
  <span>1 / 5</span>
  <a href="#"><i class="fa-solid fa-chevron-right"></i></a>
  <a href="#"><i class="fa-solid fa-angles-right"></i></a>
</div>

Font Awesome 文件类型图标

文件类型图标用于文件管理、上传下载、文档展示等场景。

1. 通用文件图标

<!-- 文件 -->
<i class="fa-solid fa-file"></i>           <!-- 普通文件 -->
<i class="fa-solid fa-file-lines"></i>    <!-- 文档(带行) -->
<i class="fa-solid fa-file-zipper"></i>   <!-- 压缩包 -->
<i class="fa-solid fa-file-pdf"></i>      <!-- PDF -->
<i class="fa-solid fa-file-word"></i>     <!-- Word -->
<i class="fa-solid fa-file-excel"></i>    <!-- Excel -->
<i class="fa-solid fa-file-powerpoint"></i> <!-- PPT -->
<i class="fa-solid fa-file-image"></i>    <!-- 图片 -->
<i class="fa-solid fa-file-video"></i>    <!-- 视频 -->
<i class="fa-solid fa-file-audio"></i>    <!-- 音频 -->
<i class="fa-solid fa-file-code"></i>     <!-- 代码 -->
<i class="fa-solid fa-file-csv"></i>      <!-- CSV -->

2. 文件夹图标

<i class="fa-solid fa-folder"></i>         <!-- 文件夹 -->
<i class="fa-solid fa-folder-open"></i>   <!-- 打开文件夹 -->
<i class="fa-solid fa-folder-plus"></i>   <!-- 新建文件夹 -->
<i class="fa-solid fa-folder-minus"></i>  <!-- 删除文件夹 -->

3. 文件操作图标

<i class="fa-solid fa-file-export"></i>   <!-- 导出 -->
<i class="fa-solid fa-file-import"></i>   <!-- 导入 -->
<i class="fa-solid fa-file-arrow-up"></i> <!-- 上传 -->
<i class="fa-solid fa-file-arrow-down"></i> <!-- 下载 -->
<i class="fa-solid fa-copy"></i>          <!-- 复制 -->
<i class="fa-solid fa-paste"></i>         <!-- 粘贴 -->
<i class="fa-solid fa-scissors"></i>      <!-- 剪切 -->
<i class="fa-solid fa-trash"></i>         <!-- 删除 -->

4. 文件列表应用

<ul class="file-list">
  <li><i class="fa-solid fa-file-pdf"></i> 合同.pdf <span>2.3MB</span></li>
  <li><i class="fa-solid fa-file-excel"></i> 报表.xlsx <span>1.1MB</span></li>
  <li><i class="fa-solid fa-file-zipper"></i> 源码.zip <span>8.6MB</span></li>
</ul>

Font Awesome 表单图标

表单图标用于输入框、按钮、校验提示等交互场景,提升表单可用性。

1. 输入框图标

<!-- 用户 -->
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-user-lock"></i>

<!-- 密码/锁 -->
<i class="fa-solid fa-lock"></i>
<i class="fa-solid fa-lock-open"></i>
<i class="fa-solid fa-key"></i>

<!-- 邮箱 -->
<i class="fa-solid fa-envelope"></i>
<i class="fa-solid fa-at"></i>

<!-- 电话 -->
<i class="fa-solid fa-phone"></i>

<!-- 搜索 -->
<i class="fa-solid fa-magnifying-glass"></i>

<!-- 其他输入 -->
<i class="fa-solid fa-calendar"></i>        <!-- 日期 -->
<i class="fa-solid fa-clock"></i>           <!-- 时间 -->
<i class="fa-solid fa-location-dot"></i>    <!-- 地址 -->

2. 输入框图标实战

<div class="input-group">
  <i class="fa-solid fa-user"></i>
  <input type="text" placeholder="用户名">
</div>

<div class="input-group">
  <i class="fa-solid fa-lock"></i>
  <input type="password" placeholder="密码">
</div>

<div class="input-group">
  <i class="fa-solid fa-magnifying-glass"></i>
  <input type="search" placeholder="搜索...">
</div>

3. 表单按钮图标

<button><i class="fa-solid fa-check"></i> 提交</button>
<button><i class="fa-solid fa-xmark"></i> 取消</button>
<button><i class="fa-solid fa-rotate-right"></i> 重置</button>

4. 校验提示

<!-- 成功 -->
<p class="valid"><i class="fa-solid fa-circle-check"></i> 格式正确</p>

<!-- 错误 -->
<p class="error"><i class="fa-solid fa-circle-exclamation"></i> 密码过短</p>

<!-- 信息 -->
<p class="info"><i class="fa-solid fa-circle-info"></i> 请输入邮箱</p>

Font Awesome 性别图标

性别图标用于用户资料、统计报表中标识性别信息。

1. 性别图标

<!-- 男性 -->
<i class="fa-solid fa-mars"></i>          <!-- 男(♂) -->
<i class="fa-solid fa-person"></i>       <!-- 人物 -->

<!-- 女性 -->
<i class="fa-solid fa-venus"></i>        <!-- 女(♀) -->
<i class="fa-solid fa-person-dress"></i> <!-- 女装人物 -->

<!-- 跨性别 -->
<i class="fa-solid fa-transgender"></i>

<!-- 通用人群 -->
<i class="fa-solid fa-people-group"></i>
<i class="fa-solid fa-user-group"></i>
<i class="fa-solid fa-person-cane"></i>

2. 资料卡应用

<div class="profile">
  <i class="fa-solid fa-mars fa-2x"></i>
  <p>男性 <span>45%</span></p>
</div>

<div class="profile">
  <i class="fa-solid fa-venus fa-2x"></i>
  <p>女性 <span>55%</span></p>
</div>

3. 统计场景

<!-- 用户性别分布 -->
<table>
  <tr><td><i class="fa-solid fa-mars"></i> 男</td><td>1,200</td></tr>
  <tr><td><i class="fa-solid fa-venus"></i> 女</td><td>1,100</td></tr>
  <tr><td><i class="fa-solid fa-user"></i> 未知</td><td>80</td></tr>
</table>

Font Awesome 手势图标

手势图标用于交互提示、点赞收藏、触摸操作等场景。

1. 手势图标

<!-- 点赞 -->
<i class="fa-solid fa-thumbs-up"></i>
<i class="fa-solid fa-thumbs-down"></i>

<!-- 比心 -->
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-pulse"></i>

<!-- 手势 -->
<i class="fa-solid fa-hand"></i>           <!-- 手掌 -->
<i class="fa-solid fa-hand-peace"></i>     <!-- 和平手势 -->
<i class="fa-solid fa-hand-sparkles"></i>  <!-- 发光手 -->
<i class="fa-solid fa-hand-pointer"></i>   <!-- 点击指针 -->
<i class="fa-solid fa-hand-point-up"></i>   <!-- 上指 -->
<i class="fa-solid fa-hand-point-down"></i> <!-- 下指 -->
<i class="fa-solid fa-hand-point-left"></i> <!-- 左指 -->
<i class="fa-solid fa-hand-point-right"></i> <!-- 右指 -->
<i class="fa-solid fa-hand-back-fist"></i>  <!-- 拳头 -->
<i class="fa-solid fa-hand-fist"></i>      <!-- 握拳 -->
<i class="fa-solid fa-hand-holding-heart"></i> <!-- 捧心 -->

2. 点赞交互示例

<button class="like-btn">
  <i class="fa-solid fa-thumbs-up"></i>
  <span>点赞 328</span>
</button>

<button class="favorite-btn">
  <i class="fa-solid fa-heart"></i>
  <span>收藏 56</span>
</button>

3. 手势提示应用

<div class="gesture-tip">
  <i class="fa-solid fa-hand-point-right"></i>
  右滑查看更多
</div>

<div class="gesture-tip">
  <i class="fa-solid fa-hand-pointer"></i>
  点击进入详情
</div>

Font Awesome 医疗图标

医疗图标用于健康类网站、医院系统、医疗 App 等场景。

1. 医疗图标

<!-- 医院与急救 -->
<i class="fa-solid fa-hospital"></i>
<i class="fa-solid fa-truck-medical"></i>   <!-- 救护车 -->
<i class="fa-solid fa-briefcase-medical"></i> <!-- 医疗箱 -->
<i class="fa-solid fa-kit-medical"></i>     <!-- 急救包 -->
<i class="fa-solid fa-notes-medical"></i>   <!-- 病历 -->

<!-- 检查与治疗 -->
<i class="fa-solid fa-stethoscope"></i>    <!-- 听诊器 -->
<i class="fa-solid fa-syringe"></i>        <!-- 注射器 -->
<i class="fa-solid fa-pills"></i>          <!-- 药片 -->
<i class="fa-solid fa-tablets"></i>        <!-- 胶囊 -->
<i class="fa-solid fa-prescription"></i>   <!-- 处方 -->
<i class="fa-solid fa-microscope"></i>     <!-- 显微镜 -->
<i class="fa-solid fa-x-ray"></i>          <!-- X光 -->

<!-- 健康状态 -->
<i class="fa-solid fa-heart-pulse"></i>    <!-- 心率 -->
<i class="fa-solid fa-heart-crack"></i>    <!-- 心脏破裂 -->
<i class="fa-solid fa-virus"></i>          <!-- 病毒 -->
<i class="fa-solid fa-disease"></i>        <!-- 疾病 -->
<i class="fa-solid fa-bone"></i>           <!-- 骨骼 -->
<i class="fa-solid fa-tooth"></i>          <!-- 牙齿 -->
<i class="fa-solid fa-eye"></i>            <!-- 眼睛 -->
<i class="fa-solid fa-ear-listen"></i>     <!-- 耳朵 -->

2. 健康应用示例

<div class="health-card">
  <i class="fa-solid fa-heart-pulse fa-2x"></i>
  <p>心率 <b>72</b> bpm</p>
</div>

<div class="health-card">
  <i class="fa-solid fa-stethoscope fa-2x"></i>
  <p>预约问诊</p>
</div>

Font Awesome 付款图标

付款图标用于支付页面、订单结算、钱包管理等功能。

1. 支付图标

<!-- 支付方式 -->
<i class="fa-solid fa-credit-card"></i>     <!-- 信用卡 -->
<i class="fa-solid fa-money-bill"></i>      <!-- 现金 -->
<i class="fa-solid fa-money-bill-wave"></i> <!-- 纸币 -->
<i class="fa-solid fa-wallet"></i>          <!-- 钱包 -->
<i class="fa-solid fa-coins"></i>           <!-- 硬币 -->
<i class="fa-solid fa-sack-dollar"></i>     <!-- 钱袋 -->

<!-- 品牌支付 -->
<i class="fa-brands fa-alipay"></i>         <!-- 支付宝 -->
<i class="fa-brands fa-weixin"></i>         <!-- 微信 -->
<i class="fa-brands fa-paypal"></i>         <!-- PayPal -->
<i class="fa-brands fa-cc-visa"></i>        <!-- Visa -->
<i class="fa-brands fa-cc-mastercard"></i>  <!-- MasterCard -->
<i class="fa-brands fa-google-pay"></i>     <!-- Google Pay -->
<i class="fa-brands fa-apple-pay"></i>      <!-- Apple Pay -->
<i class="fa-brands fa-cc-amazon-pay"></i>  <!-- Amazon Pay -->

<!-- 交易状态 -->
<i class="fa-solid fa-receipt"></i>          <!-- 收据 -->
<i class="fa-solid fa-circle-check"></i>     <!-- 支付成功 -->
<i class="fa-solid fa-circle-xmark"></i>    <!-- 支付失败 -->
<i class="fa-solid fa-rotate-right"></i>     <!-- 重新支付 -->

2. 支付方式选择器

<div class="pay-methods">
  <label><input type="radio" name="pay">
    <i class="fa-brands fa-alipay"></i> 支付宝</label>
  <label><input type="radio" name="pay">
    <i class="fa-brands fa-weixin"></i> 微信支付</label>
  <label><input type="radio" name="pay">
    <i class="fa-solid fa-credit-card"></i> 银行卡</label>
</div>

3. 订单状态展示

<div class="order-status">
  <i class="fa-solid fa-circle-check"></i>
  支付成功,商家将尽快发货
</div>

Font Awesome 加载中图标

加载中图标用于异步请求、页面加载、进度指示等场景,常配合 CSS 动画实现旋转效果。

1. 加载图标

<i class="fa-solid fa-spinner"></i>        <!-- 经典加载圈 -->
<i class="fa-solid fa-circle-notch"></i>    <!-- 圆环 -->
<i class="fa-solid fa-arrows-rotate"></i>  <!-- 旋转箭头 -->
<i class="fa-solid fa-rotate"></i>         <!-- 旋转 -->
<i class="fa-solid fa-sync"></i>           <!-- 同步 -->
<i class="fa-solid fa-gear"></i>           <!-- 齿轮 -->
<i class="fa-solid fa-compact-disc"></i>   <!-- 光盘 -->
<i class="fa-solid fa-hourglass-half"></i> <!-- 沙漏 -->

2. 旋转动画

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

<i class="fa-solid fa-spinner"></i>  正在加载...

3. 按钮加载状态

<button id="submitBtn">
  <i class="fa-solid fa-spinner fa-spin"></i> 提交中...
</button>

<!-- fa-spin 是内置动画类 -->
<i class="fa-solid fa-sync fa-spin"></i>

<!-- 反向旋转 -->
<i class="fa-solid fa-sync fa-spin fa-spin-reverse"></i>

<!-- 脉冲效果 -->
<i class="fa-solid fa-spinner fa-pulse"></i>

4. 加载遮罩示例

<div class="loading-overlay">
  <i class="fa-solid fa-circle-notch fa-spin fa-3x"></i>
  <p>数据加载中...</p>
</div>

Font Awesome 文本图标

文本图标用于编辑、排版、字体相关工具场景。

1. 文本编辑图标

<!-- 编辑操作 -->
<i class="fa-solid fa-pen"></i>           <!-- 钢笔 -->
<i class="fa-solid fa-pen-to-square"></i> <!-- 编辑 -->
<i class="fa-solid fa-eraser"></i>        <!-- 橡皮 -->
<i class="fa-solid fa-highlighter"></i>   <!-- 荧光笔 -->

<!-- 排版 -->
<i class="fa-solid fa-bold"></i>         <!-- 加粗 -->
<i class="fa-solid fa-italic"></i>       <!-- 斜体 -->
<i class="fa-solid fa-underline"></i>    <!-- 下划线 -->
<i class="fa-solid fa-strikethrough"></i> <!-- 删除线 -->
<i class="fa-solid fa-heading"></i>      <!-- 标题 -->
<i class="fa-solid fa-list"></i>         <!-- 列表 -->
<i class="fa-solid fa-list-ol"></i>      <!-- 有序列表 -->
<i class="fa-solid fa-list-ul"></i>      <!-- 无序列表 -->
<i class="fa-solid fa-indent"></i>       <!-- 缩进 -->
<i class="fa-solid fa-outdent"></i>      <!-- 减少缩进 -->
<i class="fa-solid fa-align-left"></i>   <!-- 左对齐 -->
<i class="fa-solid fa-align-center"></i> <!-- 居中 -->
<i class="fa-solid fa-align-right"></i>  <!-- 右对齐 -->
<i class="fa-solid fa-align-justify"></i> <!-- 两端对齐 -->

<!-- 字体相关 -->
<i class="fa-solid fa-font"></i>          <!-- 字体 -->
<i class="fa-solid fa-font-size"></i>     <!-- 字号 -->
<i class="fa-solid fa-text-height"></i>   <!-- 行高 -->
<i class="fa-solid fa-text-width"></i>    <!-- 字宽 -->
<i class="fa-solid fa-quote-left"></i>    <!-- 左引号 -->
<i class="fa-solid fa-quote-right"></i>   <!-- 右引号 -->
<i class="fa-solid fa-link"></i>          <!-- 链接 -->
<i class="fa-solid fa-unlink"></i>        <!-- 取消链接 -->

2. 富文本工具栏

<div class="toolbar">
  <button><i class="fa-solid fa-bold"></i></button>
  <button><i class="fa-solid fa-italic"></i></button>
  <button><i class="fa-solid fa-underline"></i></button>
  <button><i class="fa-solid fa-list-ul"></i></button>
  <button><i class="fa-solid fa-list-ol"></i></button>
  <button><i class="fa-solid fa-link"></i></button>
</div>

Font Awesome 交通工具图标

交通工具图标用于出行、物流、地图导航等场景。

1. 交通工具图标

<!-- 陆地交通 -->
<i class="fa-solid fa-car"></i>            <!-- 汽车 -->
<i class="fa-solid fa-car-side"></i>      <!-- 汽车侧面 -->
<i class="fa-solid fa-truck"></i>         <!-- 卡车 -->
<i class="fa-solid fa-truck-fast"></i>    <!-- 快速卡车 -->
<i class="fa-solid fa-bus"></i>           <!-- 公交 -->
<i class="fa-solid fa-bicycle"></i>       <!-- 自行车 -->
<i class="fa-solid fa-motorcycle"></i>    <!-- 摩托车 -->
<i class="fa-solid fa-train"></i>         <!-- 火车 -->
<i class="fa-solid fa-train-subway"></i>  <!-- 地铁 -->
<i class="fa-solid fa-taxi"></i>          <!-- 出租车 -->
<i class="fa-solid fa-truck-moving"></i>  <!-- 搬家车 -->

<!-- 水上交通 -->
<i class="fa-solid fa-ship"></i>          <!-- 轮船 -->
<i class="fa-solid fa-anchor"></i>        <!-- 锚 -->
<i class="fa-solid fa-sailboat"></i>      <!-- 帆船 -->

<!-- 空中交通 -->
<i class="fa-solid fa-plane"></i>          <!-- 飞机 -->
<i class="fa-solid fa-plane-departure"></i> <!-- 起飞 -->
<i class="fa-solid fa-plane-arrival"></i>   <!-- 降落 -->
<i class="fa-solid fa-helicopter"></i>     <!-- 直升机 -->
<i class="fa-solid fa-rocket"></i>         <!-- 火箭 -->

2. 物流追踪示例

<div class="shipment">
  <i class="fa-solid fa-truck-fast"></i>
  <p>包裹运输中</p>
  <span>预计明天送达</span>
</div>

<div class="shipment done">
  <i class="fa-solid fa-circle-check"></i>
  <p>已签收</p>
</div>

3. 出行场景

<div class="transport-options">
  <div><i class="fa-solid fa-taxi"></i> 快车</div>
  <div><i class="fa-solid fa-bus"></i> 公交</div>
  <div><i class="fa-solid fa-train-subway"></i> 地铁</div>
  <div><i class="fa-solid fa-bicycle"></i> 骑行</div>
</div>

Font Awesome 音/视频图标

音视频图标用于播放器、媒体库、直播、会议等场景。

1. 播放控制图标

<!-- 播放控制 -->
<i class="fa-solid fa-play"></i>          <!-- 播放 -->
<i class="fa-solid fa-pause"></i>         <!-- 暂停 -->
<i class="fa-solid fa-stop"></i>          <!-- 停止 -->
<i class="fa-solid fa-forward"></i>       <!-- 快进 -->
<i class="fa-solid fa-backward"></i>      <!-- 后退 -->
<i class="fa-solid fa-backward-step"></i> <!-- 上一首 -->
<i class="fa-solid fa-forward-step"></i>  <!-- 下一首 -->
<i class="fa-solid fa-volume-high"></i>   <!-- 音量高 -->
<i class="fa-solid fa-volume-low"></i>    <!-- 音量低 -->
<i class="fa-solid fa-volume-off"></i>    <!-- 静音 -->
<i class="fa-solid fa-volume-xmark"></i> <!-- 关闭音量 -->
<i class="fa-solid fa-microphone"></i>    <!-- 麦克风 -->
<i class="fa-solid fa-microphone-slash"></i> <!-- 静麦 -->

<!-- 媒体类型 -->
<i class="fa-solid fa-music"></i>         <!-- 音乐 -->
<i class="fa-solid fa-headphones"></i>    <!-- 耳机 -->
<i class="fa-solid fa-video"></i>         <!-- 视频 -->
<i class="fa-solid fa-video-slash"></i>   <!-- 关闭视频 -->
<i class="fa-solid fa-camera"></i>        <!-- 相机 -->
<i class="fa-solid fa-film"></i>          <!-- 胶片 -->
<i class="fa-solid fa-clapperboard"></i>  <!-- 场记板 -->
<i class="fa-solid fa-podcast"></i>       <!-- 播客 -->
<i class="fa-solid fa-radio"></i>         <!-- 收音机 -->
<i class="fa-solid fa-tower-broadcast"></i> <!-- 广播塔 -->

2. 播放器界面

<div class="player">
  <button><i class="fa-solid fa-backward-step"></i></button>
  <button><i class="fa-solid fa-play fa-2x"></i></button>
  <button><i class="fa-solid fa-forward-step"></i></button>
  <i class="fa-solid fa-volume-high"></i>
</div>

3. 会议/直播状态

<div class="meeting-controls">
  <button><i class="fa-solid fa-microphone"></i> 麦克风</button>
  <button><i class="fa-solid fa-video"></i> 摄像头</button>
  <button><i class="fa-solid fa-phone-slash"></i> 挂断</button>
</div>

Font Awesome Web 应用图标

Web 应用图标覆盖前端开发中的通用操作:导航、状态、工具、通信等。

1. 常用 Web 图标

<!-- 导航 -->
<i class="fa-solid fa-house"></i>          <!-- 首页 -->
<i class="fa-solid fa-bars"></i>           <!-- 菜单 -->
<i class="fa-solid fa-xmark"></i>          <!-- 关闭 -->
<i class="fa-solid fa-gear"></i>           <!-- 设置 -->
<i class="fa-solid fa-magnifying-glass"></i> <!-- 搜索 -->
<i class="fa-solid fa-user"></i>           <!-- 用户 -->
<i class="fa-solid fa-bell"></i>           <!-- 通知 -->
<i class="fa-solid fa-envelope"></i>       <!-- 邮件 -->
<i class="fa-solid fa-comment"></i>        <!-- 评论 -->
<i class="fa-solid fa-comments"></i>       <!-- 聊天 -->

<!-- 内容操作 -->
<i class="fa-solid fa-plus"></i>           <!-- 添加 -->
<i class="fa-solid fa-pen-to-square"></i> <!-- 编辑 -->
<i class="fa-solid fa-trash"></i>          <!-- 删除 -->
<i class="fa-solid fa-download"></i>       <!-- 下载 -->
<i class="fa-solid fa-upload"></i>         <!-- 上传 -->
<i class="fa-solid fa-share"></i>          <!-- 分享 -->
<i class="fa-solid fa-star"></i>           <!-- 收藏 -->
<i class="fa-solid fa-eye"></i>            <!-- 查看 -->
<i class="fa-solid fa-eye-slash"></i>      <!-- 隐藏 -->
<i class="fa-solid fa-bookmark"></i>       <!-- 书签 -->
<i class="fa-solid fa-flag"></i>           <!-- 标记 -->

<!-- 状态 -->
<i class="fa-solid fa-circle-check"></i>   <!-- 成功 -->
<i class="fa-solid fa-circle-info"></i>    <!-- 信息 -->
<i class="fa-solid fa-triangle-exclamation"></i> <!-- 警告 -->
<i class="fa-solid fa-circle-xmark"></i>   <!-- 错误 -->
<i class="fa-solid fa-clock"></i>          <!-- 时间 -->
<i class="fa-solid fa-calendar"></i>       <!-- 日期 -->

2. 顶部导航栏

<nav>
  <button class="menu"><i class="fa-solid fa-bars"></i></button>
  <a href="#"><i class="fa-solid fa-house"></i> 首页</a>
  <div class="actions">
    <i class="fa-solid fa-magnifying-glass"></i>
    <i class="fa-solid fa-bell"></i>
    <i class="fa-solid fa-user"></i>
  </div>
</nav>

3. 操作按钮组

<div class="actions">
  <button><i class="fa-solid fa-pen-to-square"></i> 编辑</button>
  <button><i class="fa-solid fa-trash"></i> 删除</button>
  <button><i class="fa-solid fa-share"></i> 分享</button>
</div>

4. 通知角标

<div class="bell-wrap">
  <i class="fa-solid fa-bell"></i>
  <span class="badge">3</span>
</div>

Font Awesome 参考手册

1. 图标尺寸

<!-- 尺寸类 -->
<i class="fa-solid fa-star fa-xs"></i>      <!-- 极小 -->
<i class="fa-solid fa-star fa-sm"></i>      <!-- 小 -->
<i class="fa-solid fa-star"></i>           <!-- 默认 -->
<i class="fa-solid fa-star fa-lg"></i>      <!-- 大 -->
<i class="fa-solid fa-star fa-xl"></i>      <!-- 特大 -->
<i class="fa-solid fa-star fa-2xl"></i>     <!-- 极大 -->

<!-- 倍数缩放 -->
<i class="fa-solid fa-star fa-2x"></i>      <!-- 2倍 -->
<i class="fa-solid fa-star fa-3x"></i>      <!-- 3倍 -->
<i class="fa-solid fa-star fa-5x"></i>      <!-- 5倍 -->
<i class="fa-solid fa-star fa-10x"></i>     <!-- 10倍 -->

2. 颜色

<i class="fa-solid fa-heart" style="color: red;"></i>
<i class="fa-solid fa-heart" style="color: #e74c3c;"></i>
<i class="fa-solid fa-star" style="color: #f1c40f;"></i>
<i class="fa-solid fa-thumbs-up" style="color: #2ecc71;"></i>

3. 动画

<i class="fa-solid fa-spinner fa-spin"></i>      <!-- 旋转 -->
<i class="fa-solid fa-heart fa-beat"></i>        <!-- 跳动 -->
<i class="fa-solid fa-bell fa-shake"></i>        <!-- 摇晃 -->
<i class="fa-solid fa-arrow-up fa-bounce"></i>   <!-- 弹跳 -->
<i class="fa-solid fa-circle fa-fade"></i>       <!-- 淡入淡出 -->
<i class="fa-solid fa-flag fa-flip"></i>         <!-- 翻转 -->
<i class="fa-solid fa-sync fa-pulse"></i>        <!-- 脉冲 -->

4. 变换与旋转

<!-- 旋转 -->
<i class="fa-solid fa-arrow-right fa-rotate-90"></i>
<i class="fa-solid fa-arrow-right fa-rotate-180"></i>
<i class="fa-solid fa-arrow-right fa-rotate-270"></i>

<!-- 翻转 -->
<i class="fa-solid fa-arrow-right fa-flip-horizontal"></i>
<i class="fa-solid fa-arrow-right fa-flip-vertical"></i>

<!-- 组合变换 -->
<i class="fa-solid fa-arrow-right fa-flip-both"></i>

5. 组合与叠加

<!-- 叠加图标 -->
<span class="fa-stack">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-solid fa-twitter fa-stack-1x"></i>
</span>

<!-- 固定宽度对齐 -->
<i class="fa-solid fa-home fa-fw"></i>
<i class="fa-solid fa-user fa-fw"></i>

Font Awesome 是当前最流行的图标字体库,本篇汇总其完整学习路线。

1. 快速上手

引入 CSS:all.min.css(CDN 或本地)
选择图标:访问 fontawesome.com/icons 搜索
插入 HTML:使用 <i class="fa-solid fa-图标名"></i>

2. 图标分类速查

分类	示例
品牌	fa-github、fa-weixin、fa-alipay
图表	fa-chart-bar、fa-chart-pie、fa-chart-line
货币	fa-dollar-sign、fa-yen-sign、fa-coins
方向	fa-arrow-right、fa-chevron-down、fa-rotate
文件	fa-file-pdf、fa-file-word、fa-folder
表单	fa-user、fa-lock、fa-envelope
性别	fa-mars、fa-venus
手势	fa-thumbs-up、fa-heart、fa-hand
医疗	fa-hospital、fa-stethoscope、fa-pills
付款	fa-credit-card、fa-wallet、fa-receipt
加载	fa-spinner、fa-sync、fa-hourglass
文本	fa-bold、fa-italic、fa-list
交通	fa-car、fa-plane、fa-ship
音视频	fa-play、fa-volume-high、fa-video
Web 应用	fa-house、fa-bell、fa-gear

3. 高级用法

尺寸:fa-xs ~ fa-10x,fa-fw 固定宽度
动画:fa-spin、fa-pulse、fa-beat、fa-shake
变换:fa-rotate-*、fa-flip-*
叠加:fa-stack 组合两个图标
颜色:直接设置 CSS color 属性

4. 最佳实践

语义化标签:按钮内图标加 aria-hidden="true"
图标不承载唯一信息时,配文字说明
性能:只引入需要的图标(可自建子集)
兼容性:IE 等旧浏览器建议用图片替代

<!-- 无障碍示例 -->
<button>
  <i class="fa-solid fa-trash" aria-hidden="true"></i>
  <span class="sr-only">删除</span>
</button>

至此 Font Awesome 全部核心用法介绍完毕,动手实践吧!

第 1 / 18 节