图标调用说明

本页介绍如何在本站（Font Awesome Free 7.3.1 图标库）查看、复制并调用图标。所有图标均为免费授权。

1 浏览与搜索

打开首页即可看到全部 1992 个免费图标（solid / regular / brands）。
顶部搜索框支持图标名称与关键字（中英文）即时过滤。
点击任意图标卡片进入详情页，可查看 Unicode 码点、CSS 类、可用样式，以及 SVG 源码 / HTML 片段 / Data URI / Base64 等可复制代码片段。

2 调用方式

下面四种方式任选其一，按场景选用。

推荐方式一：Web 字体类（与本站渲染一致）

引入 Font Awesome 的 CSS 后，用 <i> 标签 + 图标类即可。图标颜色由 CSS color 控制，大小由 font-size 控制。

<link rel="stylesheet" href="css/all.min.css">

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-regular fa-star"></i>

方式二：内联 SVG（便于改色 / 精简）

在详情页「内联代码 → SVG 源码」复制，直接粘贴到 HTML，并用 fill 改色，无需引入任何 CSS。

<svg viewBox="0 0 512 512">
  <path fill="#07C160" d="..."></path>
</svg>

方式三：Data URI（内联到 <img> 或 CSS background）

详情页「Data URI」tab 提供 data:image/svg+xml,... 字符串，可直接放入 <img src> 或背景图。

<img src="data:image/svg+xml,%3Csvg ...%3E" alt="house">

方式四：Base64（用于不支持特殊字符的场景）

详情页「Base64」tab 提供 data:image/svg+xml;base64,...，适合部分对 URL 编码敏感的旧系统。

<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94..." alt="house">

3 自定义颜色

Web 字体图标：用 CSS .fa-house{color:#07C160} 即可换色。
内联 SVG：修改 <path> 的 fill 属性；或在详情页「自定义颜色」面板取色后，复制带颜色的 SVG 源码。

4 尺寸与颜色

通过 font-size 控制图标大小，通过 color 控制颜色。常用尺寸类：fa-lg、fa-2x ~ fa-9x（以及 fa-xs / fa-sm）。

尺寸示例

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-house fa-lg"></i>        /* 约 +33% */
<i class="fa-solid fa-house fa-2x"></i>
<i class="fa-solid fa-house fa-3x"></i>
<i class="fa-solid fa-house fa-4x"></i>
/* 还支持 fa-xs / fa-sm / fa-5x ~ fa-9x */

颜色示例

<style>
  .ico-red{color:#e03131}
  .ico-green{color:#07C160}
</style>
<i class="fa-solid fa-star ico-red"></i>
<i class="fa-solid fa-star ico-green"></i>
<i class="fa-solid fa-star" style="color:#4f46e5;font-size:34px"></i>

提示：若图标上下被截断，可适当增大行高（line-height）。

5 固定宽度图标

使用 fa-fw 让图标等宽对齐，适合导航、列表等需要对齐的场景。

Home Library Applications Settings

<div class="list-group">
  <a href="#"><i class="fa-solid fa-house fa-fw"></i> Home</a>
  <a href="#"><i class="fa-solid fa-book fa-fw"></i> Library</a>
  <a href="#"><i class="fa-solid fa-pencil fa-fw"></i> Applications</a>
  <a href="#"><i class="fa-solid fa-gear fa-fw"></i> Settings</a>
</div>

6 列表图标

用 fa-ul 与 fa-li 替换无序列表的项目符号。

任务已完成
正在加载…
普通项

<ul class="fa-ul">
  <li><i class="fa-li fa-solid fa-square-check"></i> 任务已完成</li>
  <li><i class="fa-li fa-solid fa-spinner fa-spin"></i> 正在加载…</li>
  <li><i class="fa-li fa-solid fa-circle"></i> 普通项</li>
</ul>

7 动画图标

使用 fa-spin（连续旋转）或 fa-pulse（8 步节奏旋转）为图标添加动效。

<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-circle-notch fa-spin"></i>
<i class="fa-solid fa-arrows-rotate fa-spin"></i>
<i class="fa-solid fa-gear fa-spin"></i>
<i class="fa-solid fa-spinner fa-pulse"></i>

8 旋转与翻转

使用 fa-rotate-* 旋转、fa-flip-* 翻转图标。

<i class="fa-solid fa-shield"></i>
<i class="fa-solid fa-shield fa-rotate-90"></i>
<i class="fa-solid fa-shield fa-rotate-180"></i>
<i class="fa-solid fa-shield fa-rotate-270"></i>
<i class="fa-solid fa-shield fa-flip-horizontal"></i>
<i class="fa-solid fa-shield fa-flip-vertical"></i>

9 堆叠图标

用 fa-stack 父级叠加两个图标：fa-stack-2x 为底层、fa-stack-1x 为上层，fa-inverse 反色上层。

<span class="fa-stack">
  <i class="fa-solid fa-circle fa-stack-2x"></i>
  <i class="fa-brands fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack">
  <i class="fa-solid fa-camera fa-stack-1x"></i>
  <i class="fa-solid fa-ban fa-stack-2x" style="color:#e03131"></i>
</span>

10 边框与浮动

用 fa-border 加边框、fa-pull-left / fa-pull-right 让图标浮动到文字两侧。

Font Awesome 提供了一套灵活、易用的矢量图标集，可轻松定制大小、颜色与排版，是网页设计中替代位图图标的理想选择。

<i class="fa-solid fa-quote-left fa-3x fa-pull-left fa-border"></i>
Font Awesome 提供了一套灵活、易用的矢量图标集……