网站页面中使用 CDN 加载 Font Awesome 5 来显示一些需要的图标，但是 Font Awesome 5 字体图标显示乱码。

Font Awesome 5 图标乱码原因

此种情况下 Font Awesome 5 字体图标显示乱码只有一种原因：加载的 Font Awesome 5 CSS 文件不全。

在你的页面中你可能只加载了 fontawesome.min.css 文件，没有加载 Font Awesome 5 图标类别文件。

Font Awesome 5 图标乱码解决方法

方法一

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

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

方法二

将使用的 fontawsome.min.css 文件修改为 all.min.css 文件，all.min.css文件中包含了fontawesome.min.css 和图标类别文件的 CSS 定义代码。

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