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

Font Awesome 5 与以前的 Font Awesome 4 使用方法不同，Font Awesome 5 的字体分为 far, fas, fab，而没有以前的 fa 字体。

  • far ： Font Awesome Reguler，Font Awesome 常规字体，字体是有边框，内容是黑色，背景是白色。
  • fas ： Font Awesome Solid，Font Awesome 实心字体，字体是实心的，内容是白色，背景是黑色。
  • fab ： Font Awesome Brands，Font Awesome 商标字体，一些常用的商标图标。

本文介绍 Font Awesome 5 Free 字体的使用，解释如何使用 Font Awesome 5 的 CDN 显示 Font Awesome 5 的图标。

使用 Font Awesome 5 Kit CDN

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

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

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

在页面中使用 Font Awesome 5：

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

在 HTML 中使用 Font Awesome 5 图标要使用两个类，首先要使用其类别（far, fas, fab），然后再指定特定的图标。

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

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

推荐：使用 Font Awesome 5 通用 CDN

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

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

使用 Font Awesome 5 CSS

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

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

导入 Font Awesome 5 的所有 CSS

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.4/css/all.min.css">
    </head>
    <body>
        <div id="font-awesome-5">
            <i class="far fa-clock"></i>
        </div>
    </body>
</html>

导入特定 Font Awesome 5 的 CSS 定义

如果在网站项目中只使用特定的类别，far, fas, fab 中的部分，可以只导入特定的 Font Awesome 5 CSS 文件。

导入特定的 Font Awesome 5 CSS 文件，需要导入多个 Font Awesome 5 CSS 文件：

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

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

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.4/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.4/css/regular.min.css">

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.4/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.4/css/regular.min.css">
    </head>
    <body>
        <div id="font-awesome-5">
            <i class="far fa-clock"></i>
        </div>
    </body>
</html>

使用 Font Awesome 5 JS

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

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

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

导入 Font Awesome 5 的所有 JavaScript 定义代码

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

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

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="font-awesome-5">
            <i class="far fa-clock"></i>
        </div>
        <script src="https://cdn.staticfile.org/font-awesome/5.15.4/js/all.min.js"></script>
    </body>
</html>

导入特定 Font Awesome 5 的 JavaScript 定义

如果在网站项目中只使用特定的类别，far, fas, fab 中的部分，可以只导入特定的 Font Awesome 5 JavaScript 文件。

导入特定的 Font Awesome 5 JavaScript 文件，需要导入多个 Font Awesome 5 JavaScript 文件：

首先要导入 fontawesome.min.js 或 fontawesome.js 文件，其次导入特定 Font Awesome 5 类别针对的 JavaScript 文件，如 far 类别对应的 regular.min.js 或 regular.js

在 HTML 的 <body> 元素中尾部加入如下代码，当然也可以在 <head> 中添加，导入 Font Awesome 5 的特定 JavaScript 定义，如使用 far 类别：

<script src="https://cdn.staticfile.org/font-awesome/5.15.4/js/fontawesome.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/font-awesome/5.15.4/js/regular.min.js" crossorigin="anonymous"></script>

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="font-awesome-5">
            <i class="far fa-clock"></i>
        </div>
        <script src="https://cdn.staticfile.org/font-awesome/5.15.4/js/fontawesome.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.org/font-awesome/5.15.4/js/regular.min.js" crossorigin="anonymous"></script>
    </body>
</html>