为什么 font-awesome provided link 不起作用并显示水平条？

Question

我正在尝试在我的网站上使用超赞字体，但它无法正常工作。我收到了一封电子邮件，并被告知只需将该元素粘贴到我网站的 header 中。这是元素。

<script src="https://use.fontawesome.com/b219f80601.js"></script>

我做了所有这些，但它没有工作，显示如图所示。当我从另一个帐户尝试我的旧代码时，它使用 kit 而不是 use 并正确呈现。

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

我尝试使用的图标是 fas fas user

<i class="fas fa-user"></i>

这里可能发生了什么？此外，font-awesome 没有将 crossorigin 属性添加到较新的标签。

注意：我也在使用 bootstrap 5.

这是我的 header:

<head>
   <script src="https://use.fontawesome.com/b219f80601.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://use.fontawesome.com/b219f80601.css" media="all">
   <title></title><link rel="stylesheet" href="/stylesheets/main.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

这是 body 标签末尾 bootstrap 的脚本标签：

<body>
   ...
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

注2：我制作和编辑的嵌入代码只能达到 v4.7.0.

Answer 1

看起来您的 JS link 实际上并未提供呈现图标所需的 CSS。您至少需要包含基本图标集和实体图标集 CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css" integrity="sha512-P9vJUXK+LyvAzj8otTOKzdfF1F3UYVl13+F8Fof8/2QNb8Twd6Vb+VD52I7+87tex9UXxnzPgWA3rH96RExA7A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/solid.min.css" integrity="sha512-tk4nGrLxft4l30r9ETuejLU0a3d7LwMzj0eXjzc16JQj+5U1IeVoCuGLObRDc3+eQMUcEQY1RIDPGvuA7SNQ2w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://use.fontawesome.com/b219f80601.js"></script>

<i class="fas fa-user"></i>

此外，在查看您 header 中的 CSS 标签后，我认为您可能正在尝试将 FAv5 JS 与 FAv4 CSS.

一起使用

Answer 2

这是一个帐户问题。该帐户尚未确认，但无论如何都已发送带有嵌入代码的电子邮件。

电子邮件将我发送到 this 地址，这似乎是一个有限的面板，允许您创建 font-awesome 4 个套件。这是 UI:

注册帐户后，我就可以登录该站点并定期访问 font-awesome5 并创建新套件。这些链接以 kit 开头，而不是 use

为什么 font-awesome provided link 不起作用并显示水平条？

Why does the font-awesome provided link not work and show horizontal bars?

html

font-awesome