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

使用 Font Awesome 5 CSS

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

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

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

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

加载 Font Awesome 5 的所有 CSS 代码

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

下载 Font Awesome 5 Fonts 文件，可以从 staticfile.org 网站下载特定版本的特定的字体文件，可以为 tff, woff, woff2中的一种，如下载 Regular 对应的 fa-regular-400.tff 文件，存放为当前目录下为 webfonts/fa-regular-400.tff 文件。

如果 far, fas, fab 三种字体类别都使用，就需要下载这三类字体类别所对应的字体。

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="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 文件。

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

下载 Font Awesome 5 Fonts 文件，可以从 staticfile.org 网站下载特定版本的特定的字体文件，可以为 tff, woff, woff2中的一种，如下载 Regular 对应的 fa-regular-400.tff 文件，存放为当前目录下为 webfonts/fa-regular-400.tff 文件。

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

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

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

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

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

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

加载 Font Awesome 5 的所有 JS 代码

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

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

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

加载特定 Font Awesome 5 的 JS 代码

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

加载特定的 Font Awesome 5 JavaScript 文件，需要加载多个 Font Awesome 5 JavaScript 文件：

首先要从 staticfile.org 网站下载 fontawesome.min.js 文件，其次下载特定 Font Awesome 5 类别针对的 JavaScript 文件，如 far 类别对应的 regular.min.js 文件。

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

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