Font awesome 5 pseudo-class 不适用于我的工具包

Question

注意：我没有在这里添加我的套件编号

我正在使用 Font awesome 5。我在 font awesome poral 登录后得到了套件脚本。我的问题是，如果我添加以下代码

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>

然后我得到了我的图标，但是如果我使用伪class那么我就没有得到图标。

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        position: absolute;
        top: 30%;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

但是如果我在没有我的工具包的情况下添加很棒的字体 css，上面的代码就可以工作。

Answer 1

Kitnumber.js不是一个单独的js，你必须像这样添加你的数字代码，这是font awesome给出的，首先输入你的电子邮件，然后代码将发送到你的邮箱。

那是你的球衣号码，
那么，你的css有问题，添加

content: "AE";  /* that is your text. You can also use UTF-8 character codes*/
font-family: FontAwesome;

Answer 2

更新(24/03/2020): bug从5.13版本开始修复

您需要更正字体系列才能考虑使用Font Awesome 5 Pro

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script  src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

这似乎是一个尚未修复的已知错误 (https://github.com/FortAwesome/Font-Awesome/issues/16054)，错误修复后您的代码应该可以正常工作。

值得注意的是，使用 FontAwesome 也可以解决您的问题，因为在设置中默认启用 V4

您会注意到图标不一样了：

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script  src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'FontAwesome';
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

如果您检查代码，您可以看到加载的文件：

Font awesome 5 pseudo-class 不适用于我的工具包

Font awesome 5 pseudo-class not working with my kit

css

font-awesome

font-awesome-5