css - 字体真棒 5 伪类不适用于我的工具包

问题描述

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

我正在使用 Font awesome 5。我在登录字体 awesomeporal 后得到了工具包脚本。我的问题是，如果我添加下面的代码

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

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

<!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，上面的代码就可以工作。

标签： cssfont-awesomefont-awesome-5

更新（2020 年 3 月 24 日）：从 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>

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

css - 字体真棒 5 伪类不适用于我的工具包

问题描述

解决方案

推荐阅读