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 的本地 CSS 或 JavaScript 显示 Font Awesome 6 字体图标。

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

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

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

使用 Font Awesome 6 CSS

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

  • 加载 Font Awesome 6 的所有 CSS 代码的文件
  • 加载需要使用的 Font Awesome 6 的 CSS 代码的文件

使用 Font Awesome 6 的本地 CSS 文件，必须下载 Fonts 文件，Font Awesome 6 的 Fonts 文件分为 tff, woff2 两类，只下载其中的一类就可以显示图标，如果不下载 Fonts 文件则 Font Awesome 6 图标会显示乱码。

注意：下载的 CSS 文件存放在 css 目录下，Fonts 文件存放在 webfonts 目录下，css 目录和 webfonts 目录必须在同一目录下。

加载 Font Awesome 6 的所有 CSS 代码

下载 Font Awesome 6 CSS 文件，可以从 staticfile.net 网站下载特定版本的所有 CSS 代码对应的 all.min.css 文件，存放为当前目录下为 css/all.min.css 文件。

下载 Font Awesome 6 Fonts 文件，可以从 staticfile.net 网站下载特定版本的特定的字体文件，可以为 tff, woff2中的一种，下载 Solid 对应的 fa-solid-900.tff 文件，存放为当前目录下为 webfonts/fa-solid-900.tff 文件。

免费图标只能使用 Solid 字体图标。

在 HTML 的 <head> 元素中加入如下代码，加载本地 Font Awesome 6 的所有 CSS 代码显示 Font Awesome 字体图标：

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

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="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 代码

因为免费图标只能使用 Solid 中的部分，可以只导入特定的 Font Awesome 6 CSS 文件。

可以从 staticfile.net 网站下载特定的 Font Awesome 6 CSS 文件，首先要下载 fontawesome.min.css 文件，该文件是特定字体图标的 CSS 定义，如：fa-clock，其次下载Solid 样式字体图标类别文件 solid.min.css 文件，存放为当前目录下为 css/fontawesome.min.css 和 css/solid.min.css文件。

下载 Font Awesome 6 Fonts 文件，可以从 staticfile.net 网站下载 Solid 图标对应的字体文件，可以为 tff, woff2中的一种，如 fa-solid-900.tff 文件，存放为当前目录下为 webfonts/fa-solid-900.tff 文件。

在 HTML 的 <head> 元素中加入如下代码，加载 Font Awesome 6 的特定 CSS 定义，使用 far 类别：

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

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/fontawesome.min.css">
        <link rel="stylesheet" href="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 文件，也无需下载 Fonts 文件。
因为 Font Awesome 6 JavaScript 会将 HTML + CSS 配置转换为 SVG，并设置内联 CSS 样式。

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

  • 加载 Font Awesome 6 的所有 JavaScript 代码文件
  • 加载需要使用的 Font Awesome 6 的 JavaScript 代码文件

加载 Font Awesome 6 的所有 JS 代码

下载 Font Awesome 6 JavaScript 文件，可以从 staticfile.net 网站下载特定版本的所有 JavaScript 代码对应的 all.min.js 文件，存放为当前目录下为 js/all.min.js 文件。

在 HTML 的 <body> 元素中尾部加入如下代码，当然也可以在 <head> 中添加，加载 Font Awesome 6 的所有 JavaScript 代码文件，显示 Font Awesome 字体图标：

<script src="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="js/all.min.js"></script>
    </body>
</html>

加载特定 Font Awesome 6 的 JS 代码

免费图标只能使用 Solid 类别，可以只加载 Solid 类别的 Font Awesome 6 JavaScript 文件。

加载 Solid 的 Font Awesome 6 JavaScript 文件，需要加载两个 Font Awesome 6 JavaScript 文件：

首先要从 staticfile.net 网站下载 fontawesome.min.js 文件，其次下载 Solid 类别针对的 JavaScript 文件 solid.min.js 文件。

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

<script src="js/fontawesome.min.js" crossorigin="anonymous"></script>
<script src="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="js/fontawesome.min.js" crossorigin="anonymous"></script>
        <script src="js/solid.min.js" crossorigin="anonymous"></script>
    </body>
</html>