字体真棒图标未通过 cdn.fontawesome.com 呈现答案

【问题标题】：Font Awesome icons not rendering via cdn.fontawesome.com字体真棒图标未通过 cdn.fontawesome.com 呈现
【发布时间】：2020-06-25 16:33:47
【问题描述】：

我正在尝试在我的网站上使用 Font Awesome 图标，但我遇到了提供给我的 JS 文件的问题。我去了https://cdn.fontawesome.com/，并为自己生成了一个代码，但是当我链接到它时，图标不起作用。我过去使用过 FA，使用 CSS 或开发工具包。这是一个示例 HTML 页面，其中包含特定于这篇文章的嵌入代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://use.fontawesome.com/31263fc466.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fas fa-chevron-down"></i>
    </p>
  </body>
</html>

我看到一个 Unicode F078 字符，这是正确的，但我的浏览器没有呈现图标。

早些时候，我看到了这个错误：CORS-Missing-Allow-Origin，但是当我安装浏览器扩展以允许所有请求时，它就消失了（仅适用于localhost；我知道要在我的 Nginx 配置中设置它以用于生产）。我不确定这是否与错误有关，但我想我会提到它，因为我没有在其他 link 或 script 标签中看到它

另外，请告诉我它是否在您端正确呈现。任何帮助表示赞赏。

【问题讨论】：

标签： html font-awesome

【解决方案1】：

你的问题你的版本不包含 fas 它包含 fa

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://use.fontawesome.com/31263fc466.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fa fa-chevron-down"></i>
    </p>
  </body>
</html>

使用 fas 使用这个库

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FA Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <p style="text-align: center;">
      <code>fas fa-chevron-down</code>
      <i class="fas fa-chevron-down"></i>
    </p>
  </body>
</html>

【讨论】：

谢谢，我就知道这么简单，就是想不通。