ByteNoteByteNote
字

字节笔记本

2026年2月22日

Font Awesome 5 页面引入的几种方式和应用

#前端技术

在做网页开发中，前端页面显示时经常会用到字体库图标，如 iconfont、fontawesome、glyphicons、Ionicons 等。其中最著名的就是 Font Awesome 了，现在版本已经更新到了 5.x。本文将详细介绍 Font Awesome 5 的引入方式、与 4.x 版本的变化以及使用方法。

一、Font Awesome 本质原理

Font Awesome 本质上是把图标做成了字体文件，一个图标代表一个特殊符号，需要某个图标时引用这个字体文件（CSS 文件）即可。

CSS 定义示例：

css
.fa-500px:before { content: "\f26e"; }
.fa-accusoft:before { content: "\f369"; }

HTML 页面使用：

html
<!-- 引入字体图标 -->
<div class="icon">&#xf26e</div>

图标样式设置：

css
.icon {
  font-family: FontAwesome;
}

二、Font Awesome 5 的引入方式及与 4.x 的变化

版本变化

  • 图标样式：增加了 3 种不同的图标样式，对于要使用的图标需要指定图标的名称及对应的前缀。增加了 fas、fab、fal 等前缀
  • 线框图标：所有具有线框样式（通常以 -o 结尾）的图标现在都有一个 far 前缀，并删除了它们的 -o 后缀
  • 图标名称变更：删除了别名，每个图标都只有一个正式名称

Font Awesome 5 引入方式

1. 基于 SVG 格式，使用 JS 调用图标

压缩包中含有 v4-shims.js 文件，这是为了兼容 4.x 版本的升级使用。如果已有 4.x 版本的项目，想更换成 SVG 图标，需要额外调用 v4-shims.js 或 v4-shims.min.js 文件以保证兼容性。

引入所有图标：

html
<script src="all.js"></script>

只引入 Solid 系的图标：

html
<script src="solid.min.js"></script>
<!-- 在调用 solid、brand、regular 系 js 时都要调用的文件 -->
<script src="fontawesome.min.js"></script>

使用 JS 方式调用的图标，最终在 DOM 中会以 SVG 代码显示图标。

2. 基于网页字体，使用 CSS 调用图标

CSS 方法要调用两组文件，一个是 CSS（或 Less 或 Scss）样式表，另一组是图标字体文件。即 CSS 方法调用时，实际上要用到的是 CSS 文件夹及 webfonts 文件夹里的文件。

引入所有图标：

html
<link rel="stylesheet" href="all.css">

只引入 Brand 的图标：

html
<link rel="stylesheet" href="brands.min.css">
<!-- 在调用 solid、brand、regular 系 css 时都要调用的文件 -->
<link rel="stylesheet" href="fontawesome.min.css">

使用 CSS 方式调用图标，以网页字体的方式显示，则 DOM 结构内没有 SVG 代码。

3. 使用 CDN

Web 字体 + CSS 方式：

html
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
</head>

SVG + JS 框架方式：

html
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
</head>

三、Font Awesome 5 怎么使用

FA5 图标开始支持 SVG，SVG 有更好的表现能力。在标签上喜欢用 <i> 来引用。在 HTML 页面中起到强调或斜体的文本效果一般会使用 <em></em> 标签，在语义上也可以使用 <span> 标签。

引用一个图标需要知道这两点信息：

  1. 以 fa- 为前缀的名称
  2. 要使用相应的前缀样式

注意：fa 前缀在 5.x 版本中已弃用。新的默认设置是实心的 fas 样式和品牌的 fab 样式。

图标样式对照表

样式可用性样式前缀示例Web Font 文件名SVG+JS 文件名
实心免费fas<i class="fas fa-camera"></i>fa-solid-900.*solid.js
品牌免费fab<i class="fab fa-500px"></i>fa-brands-400.*brands.js
细体仅专业版fal<i class="fal fa-camera"></i>fa-light-300.*light.js
常规仅专业版far<i class="far fa-camera-retro"></i>fa-regular-400.*regular.js
双色仅专业版fad<i class="fad fa-camera"></i>900-

1. 图标尺寸与颜色

FA 图标会自动继承 CSS 大小和颜色：

html
<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-camera"></i>
</span>

支持调整大小：

html
<div style="font-size: 24px;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

2. 图标宽度及列表图标

可以在引用图标的 HTML 元素上添加 fa-fw 类，将一个或多个图标设置为相同的固定宽度。在列表或导航菜单中图标对齐非常有用。

html
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>

列表中的图标：在固定宽度的垂直对齐基础上添加了一些实用样式。使用 fa-ul 和 fa-li 替换无序列表的默认项目符号。

html
<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

3. 图标旋转与镜像

引用图标使用 fa-rotate-* 和 fa-flip-* 类来实现旋转和翻转图标：

  • fa-rotate-90：90 度旋转
  • fa-rotate-180：180 度旋转
  • fa-rotate-270：270 度旋转
  • fa-flip-horizontal：水平翻转
  • fa-flip-vertical：垂直翻转
  • fa-flip-both：水平和垂直同时翻转（需要 5.7.0 或更高版本）

4. 图标动画

使用 fa-spin 类使任何图标旋转，或者使用 fa-pulse 使其进行 8 方向旋转。特别适用于 fa-spinner 和旋转图标类别中的所有内容。

html
<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

5. 图标堆叠

要堆叠多个图标，请在要堆叠的 2 个图标的父 HTML 元素上使用 fa-stack 类。然后为常规尺寸的图标添加 fa-stack-1x 类，为较大的图标添加 fa-stack-2x 类。fa-inverse 可以与 fa-stack-1x 一起添加到图标中，以帮助实现剔除效果。

html
<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

下载地址

原文链接：https://www.lovestu.com/fontawesome5ymyrdjzfshyy.html

前端技术
上一篇

Lovestu - 代码路上雾茫茫

下一篇

Font Awesome 5 页面引入的几种方式和应用

分享: