B Bootstrap组件实验室
返回目录首页

Font Awesome 图标库 Font Awesome 6 Free

全球使用最广的矢量图标字体库。本页使用 Free 6.7.2（jsDelivr CDN），单个 all.min.css 引入即覆盖 Solid / Regular / Brands 三族 2,000+ 枚图标，无 jQuery 依赖，与 Bootstrap 5.3.8 完全兼容。

官方对照 官方已有

Bootstrap 官方提供了 Bootstrap Icons（约 2,000 枚开源 SVG 图标），常规图标需求官方已覆盖；Font Awesome 的优势在于品牌图标族、尺寸阶梯、固定宽度与内建动画类。

对比维度Bootstrap 官方：Bootstrap IconsFont Awesome Free 6.7.2
能力定位随 Bootstrap 生态提供的开源 SVG 图标集，视觉风格与官方组件一致全球使用最广的图标字体库，图标生态与字体特性远超官方
图标规模约 2,000 枚，以 SVG sprite / web font 分发Free 版 Solid、Regular、Brands 三族合计 2,000+ 枚，含 GitHub、微信等品牌图标
引入成本需自行引入 bootstrap-icons.css 或 SVG 文件单个 all.min.css 即覆盖全部图标，webfonts 自动加载
字体特性以 currentColor 着色为主，无内置尺寸阶梯与动画类fa-xs~fa-2xl 尺寸阶梯、fa-fw 固定宽度、fa-spin/fa-pulse 动画、旋转翻转工具类
何时选用本库追求与 Bootstrap 风格统一、图标用量少需要品牌图标、列表图标纵向对齐或加载旋转动画
说明 
本小节为对照说明，无示例代码。

引入方式

通过 jsDelivr 引入 all.min.css（已固定 6.7.2）。引入后字体文件 fa-solid-900.woff2 等 webfonts 由同一 CDN 按相对路径自动加载，无需单独引入；不依赖 jQuery，与 Bootstrap 5.3.8 可直接共存。

HTML 引入 
<!-- 在 <head> 中引入 Free 版全部样式 -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">

<!-- 使用时只需写一个 <i> 标签 -->
<i class="fa-solid fa-house"></i>

基础图标示例

用 <i class="fa-solid fa-名称"></i> 即可输出一枚矢量图标；颜色继承文字色，字号随 font-size 缩放。

HTML 示例 
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa-solid fa-gear"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-envelope"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-brands fa-github"></i>

尺寸与固定宽度

fa-xs / fa-sm / fa-lg / fa-2xl 提供相对字号阶梯；fa-fw 让图标占用固定宽度，使列表中的文字纵向对齐。

fa-xs

fa-sm

默认

fa-lg

fa-2xl

固定宽度 fa-fw（文字对齐）：

收件箱 12
用户消息 5
我的收藏 3
HTML 示例 
<!-- 尺寸阶梯 -->
<i class="fa-solid fa-cat fa-xs"></i>
<i class="fa-solid fa-cat fa-sm"></i>
<i class="fa-solid fa-cat fa-lg"></i>
<i class="fa-solid fa-cat fa-2xl"></i>

<!-- 固定宽度，列表文字对齐 -->
<div class="list-group">
  <div class="list-group-item"><i class="fa-solid fa-inbox fa-fw"></i> 收件箱</div>
  <div class="list-group-item"><i class="fa-solid fa-user fa-fw"></i> 用户消息</div>
  <div class="list-group-item"><i class="fa-solid fa-star fa-fw"></i> 我的收藏</div>
</div>

旋转与动画

fa-spin 线性匀速旋转（适合加载中），fa-pulse 八步步进旋转；fa-rotate-90/180/270 与 fa-flip-horizontal 提供角度与翻转。

HTML 示例 
<i class="fa-solid fa-spinner fa-spin"></i>   <!-- 线性旋转 -->
<i class="fa-solid fa-gear fa-spin"></i>      <!-- 齿轮转起来 -->
<i class="fa-solid fa-sun fa-pulse"></i>      <!-- 步进旋转 -->
<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-comment fa-flip-horizontal"></i>

与按钮组合

图标放进 Bootstrap 按钮即构成图标按钮。下方所有按钮均真实可点：「新增条目」会追加一行记录，每行的垃圾桶按钮可单独删除，「清空列表」一键清空。

  • 订单 #1001
  • 订单 #1002
  • 订单 #1003

共 3 条记录

HTML + JS 示例 
<button type="button" class="btn btn-primary" id="faAdd">
  <i class="fa-solid fa-plus"></i> 新增条目
</button>
<ul class="list-group" id="faList">
  <li class="list-group-item d-flex justify-content-between">
    订单 #1001
    <button type="button" class="btn btn-sm btn-outline-danger fa-del">
      <i class="fa-solid fa-trash-can"></i>
    </button>
  </li>
</ul>

<script>
var no = 4;
document.getElementById('faAdd').addEventListener('click', function () {
  var li = document.createElement('li');
  li.className = 'list-group-item d-flex justify-content-between align-items-center';
  li.innerHTML = '订单 #100' + no +
    ' <button type="button" class="btn btn-sm btn-outline-danger fa-del">' +
    '<i class="fa-solid fa-trash-can"></i></button>';
  document.getElementById('faList').appendChild(li);
  no++;
});
document.getElementById('faList').addEventListener('click', function (e) {
  var b = e.target.closest('.fa-del');
  if (b) b.closest('li').remove();
});
</script>