网站页面中使用 Font Awesome 5 本地 CSS 文件来显示一些需要的图标，但是 Font Awesome 5 字体图标显示乱码。

此时可能有两种情况导致 Font Awesome 5 字体图标乱码：

  • 缺少字体文件，Font Awesome 5 字体图标乱码
  • 加载的CSS文件不全，Font Awesome 5 字体图标乱码

缺少字体文件时

从 CDN 站点下载 Fonts 字体文件，推荐从 staticfile.org 下载

字体文件要放在 webfonts 目录下，css 文件要放在 css 目录下，而且 webfonts 目录与 css 目录必须位于同一目录下。

加载的CSS文件不全时

原因

Font Awesome 5 与 Font Awesome 4 不同，在 Font Awesome 5 中 fontawsome.min.css 文件包含的 css 代码不全，如果你只加载了 fontawsome.min.css 字体图标就会显示乱码。

解决方法

方法一

加载特定的 Font Awesome 类别图标，Font Awesome 5 类别分为 far（regular）, fas（solid）, fab （brands）三个类别。例如使用 regular 类别下的图标，就要加载 regular.min.css 文件。

<!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>

方法二

将使用的 fontawsome.min.css 文件修改为 all.min.css 文件。

<!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>