FontAwesome v5.0 使用指南 | FontAwesome Online

图标基础用法

图标旋转

使用 fa-rotate-90、fa-rotate-180、fa-rotate-270 旋转图标。也可结合 fa-flip-horizontal 或 fa-flip-vertical 翻转图标方向。

动画效果

使用 fa-spin（连续旋转）、fa-pulse（8步旋转）、fa-beat（跳动）、fa-fade（淡入淡出）、fa-beat-fade（跳动淡出）、fa-flip（翻转）、fa-shake（抖动）为图标添加动态效果。

图标堆叠

使用 fa-stack 容器将多个图标上下堆叠，设置 fa-stack-1x 和 fa-stack-2x 控制层级大小。适合制作复合图标，如带角标的应用图标。

固定宽度

使用 fa-fw 将图标设为固定宽度（1.25em），使不同宽度的图标在列表中整齐排列，适合导航菜单和列表场景。

样式与尺寸

尺寸缩放

fa-xs（0.75em）、fa-sm（0.875em）、fa-lg（1.33em）、fa-2x~fa-10x 逐级放大。也可用 CSS font-size 精确控制。

颜色修改

直接使用 CSS color 属性设置图标颜色：<i class="fa-solid fa-heart" style="color:red"></i>。支持任意颜色值。

边框与背景

使用 fa-border 为图标添加边框，fa-pull-left / fa-pull-right 让图标文字环绕，fa-inverse 反转图标颜色以适应深色背景。

SVG 框架特有功能

遮罩（Mask）

SVG 框架支持遮罩功能，将一个图标作为另一个图标的遮罩，组合出独特的形状效果。使用 data-fa-mask 属性实现。

多色图标

SVG 框架支持使用 data-fa-transform 对图标进行缩放、移动、旋转等变换操作，也可结合 CSS fill 实现多色效果。

常见应用场景

导航菜单图标

在导航链接前添加图标可以提升视觉辨识度。使用 fa-fw 固定宽度类让图标对齐。

<nav>
  <a href="#"><i class="fa-solid fa-house fa-fw"></i> 首页</a>
  <a href="#"><i class="fa-solid fa-user fa-fw"></i> 个人中心</a>
  <a href="#"><i class="fa-solid fa-gear fa-fw"></i> 设置</a>
</nav>

社交分享按钮

品牌图标搭配颜色，快速制作社交分享按钮。

<a href="#" class="btn btn-dark">
  <i class="fa-brands fa-github"></i> GitHub
</a>
<a href="#" class="btn btn-primary">
  <i class="fa-brands fa-weixin"></i> 微信
</a>

评分与反馈

结合 JavaScript 实现星级评分交互组件。

<div class="rating">
  <i class="fa-solid fa-star" style="color:gold"></i>
  <i class="fa-solid fa-star" style="color:gold"></i>
  <i class="fa-solid fa-star" style="color:gold"></i>
  <i class="fa-regular fa-star"></i>
  <i class="fa-regular fa-star"></i>
</div>

加载状态指示

使用 fa-spin 或 fa-pulse 制作加载动画。

<button disabled>
  <i class="fa-solid fa-spinner fa-spin"></i> 加载中...
</button>
<div class="text-center">
  <i class="fa-solid fa-circle-notch fa-spin fa-3x"></i>
  <p>正在加载数据...</p>
</div>

FontAwesome v5 使用指南