Font Awesome 6 字体分为 Free 和 Pro 两个版本。Font Awesome 6 Free 字体是免费版，可以自由使用；Font Awesome 6 Pro 字体是收费版，需要付费才能使用。

Font Awesome 6 相对于 Font Awesome 5 也做了修改，Font Awesome 6 的字体类型分为了 Classic （经典样式）、Sharp （棱角分明的图标）、Brands （品牌图标）。

在 Classic （经典样式）与 Sharp （棱角分明的图标）两种类型的图标下又包含了不同的图标样式：

  • fa-solid ： Font Awesome Solid，Font Awesome 粗线字体图标。
  • fa-regular ： Font Awesome Reguler，Font Awesome 常规字体图标。
  • fa-light ： Font Awesome Reguler Light，Font Awesome 细线字体图标。
  • fa-thin ： Font Awesome Reguler Thin，Font Awesome 纤细线字体图标。
  • fa-duotone ： Font Awesome Reguler Duotone，Font Awesome 双色字体图标。

Font Awesome 6 可以免费使用的字体是 Classic 类型下的 fa-solid 样式字体图标。本文只介绍 Font Awesome 6 Free 免费字体图标的使用，解释如何使用 Font Awesome 6 的 CDN 显示 Font Awesome 6 的图标。

Font Awesome 6 免费图标的使用方法

要使用 Font Awesome 6 免费图标需要同时使用如下 CSS 类：

  • 图标样式类 fa-solid
  • 具体图标类，如时钟图标 fa-clock。

使用 Font Awesome 6 Kit CDN

Font Awesome Kit 是由 Font Awesome 6 提供的一个私人 CDN，它由 Cloudflare 提供 CDN 服务。

使用 Font Awesome Kit 要进入其官网注册账号，注册完账号后系统会自动为你配置一个 Kit 代码，如 baa3c35fc3。

Font Awesome Kit 只提供 JavaScript 的使用，没有提供单独使用 CSS 的方法。Font Awesome 6 JavaScript 会将 HTML + CSS 配置转换为 SVG。

在页面中使用 Font Awesome 6：

<script src="https://kit.fontawesome.com/baa3c35fc3.js" crossorigin="anonymous"></script>

如下示例，使用时钟图标：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://kit.fontawesome.com/baa3c35fc3.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="font-awesome-6">
            <i class="fa-solid fa-clock"></i>
        </div>
    </body>
</html>

推荐：使用 Font Awesome 6 通用 CDN

推荐使用该种方式加载 CDN，因为使用国内通用 CDN 的访问速度要比使用 Font Awesome Kit 的访问速度快。

Font Awesome CDN 最好是使用国内的 CDN，推荐使用 staticfile.net CDN 为 Font Awesome 提供 CDN 服务。

使用 Font Awesome 6 CSS

使用 Font Awesome 6 CSS 文件有两种方式：

  • 导入 Font Awesome 6 的所有 CSS 定义的文件
  • 导入需要使用的 Font Awesome 6 的 CSS 定义的文件

导入 Font Awesome 6 的所有 CSS

在 HTML 的 <head> 元素中加入如下代码，导入 Font Awesome 6 的所有 CSS 定义

<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/all.min.css">

如下示例，使用时钟图标：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/all.min.css">
    </head>
    <body>
        <div id="font-awesome-6">
            <i class="fa-solid fa-clock"></i>
        </div>
    </body>
</html>

导入特定 Font Awesome 6 的 CSS 定义

在 Font Amesome 6 中免费的图标是 fa-solid，可以只导入使用 fa-solid 图标对应的 CSS 文件。

导入fa-solid 图标对应的 Font Awesome 6 CSS 文件，需要导入两个 Font Awesome 6 CSS 文件：

  • 首先要导入 fontawesome.min.css 或 fontawesome.css 文件，该文件是特定字体图标的 CSS 定义，如：fa-clock
  • 其次导入solid 对应的 Font Awesome 6 文件， solid.min.css 或 solid.css

在 HTML 的 <head> 元素中加入如下代码，导入 Font Awesome 6 的特定 CSS 定义：

<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/solid.min.css">

如下示例，使用时钟图标：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/6.4.2/css/solid.min.css">
    </head>
    <body>
        <div id="font-awesome-6">
            <i class="fa-solid fa-clock"></i>
        </div>
    </body>
</html>

使用 Font Awesome 6 JS

使用 Font Awesome 6 JS 的情况下，就不需要导入 Font Awesome 的 CSS 文件。
因为 Font Awesome 6 JavaScript 会将 HTML + CSS 配置转换为 SVG，并设置内联 CSS 样式。

使用 Font Awesome 6 JavaScript 文件有两种方式：

  • 导入 Font Awesome 6 的所有 JavaScript 定义的文件
  • 导入需要使用的 Font Awesome 6 的 JavaScript 定义的文件

导入 Font Awesome 6 的所有 JS 代码

在 HTML 的 <body> 元素中尾部加入如下代码，当然也可以在 <head> 中添加，导入 Font Awesome 6 的所有 JavaScript 定义代码：

<script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/all.min.js"></script>

如下示例，使用时钟图标：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="font-awesome-6">
            <i class="fa-solid fa-clock"></i>
        </div>
        <script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/all.min.js"></script>
    </body>
</html>

导入特定 Font Awesome 6 的 JS 代码

在 Font Awesome 6 中可以免费使用的字体图标是 fa-solid，可以只导入对应的 Font Awesome 6 JavaScript 文件。

导入特定的 Font Awesome 6 JavaScript 文件，需要导入两个 Font Awesome 6 JavaScript 文件：

首先要导入 fontawesome.min.js 或 fontawesome.js 文件，其次导入solid 样式对应的 Font Awesome 6 的 JavaScript 文件， solid.min.js 或 solid.js

在 HTML 的 <body> 元素中尾部加入如下代码，当然也可以在 <head> 中添加，加载 Font Awesome 6 的 fa-solid 对应的 JavaScript 定义：

<script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/fontawesome.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/solid.min.js" crossorigin="anonymous"></script>

如下示例，使用时钟图标：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="font-awesome-6">
            <i class="fa-solid fa-clock"></i>
        </div>
        <script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/fontawesome.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.net/font-awesome/6.4.2/js/solid.min.js" crossorigin="anonymous"></script>
    </body>
</html>

结语

在本文中介绍了如何使用 Font Awesome 6 的 CDN 加载字体图标。