Font awesome 5 pseudo-class not working with my ki

2020-05-10 06:40发布

站内问答 / HTML/CSS
876 2 4

Note: I haven't added my kit number here

I am using the Font awesome 5. I got kit script after login in the font awesome poral. My issue is, If I added below code

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

then I am getting my icon but if I use pseudo-class then I am not getting the icon.

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

But the above code is working if I add font awesome css without my kit.

2条回答
倾城　Initia
2楼-- · 2020-05-10 07:10

Kitnumber.js is not an seperate js, you have to add your number code that is given by font awesome like this,first enter your email then code will be sent to your mail.enter image description here

That is your kit number,
Then,there is a problem in your css, add

content: "\25AE";  /* that is your text. You can also use UTF-8 character codes*/
font-family: FontAwesome;
查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2020-05-10 07:27

Update (24/03/2020): the bug is fixed starting from the version 5.13

You need to correct the font family to consider the use of 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>

This seems to be a known bug not yet fixed (https://github.com/FortAwesome/Font-Awesome/issues/16054) and your code should work fine when the bug get fixed.

Worth to note that using FontAwesome will also fix your issue because in the settings the V4 is enabled by default

enter image description here

You will notice that the icon isn't the same:

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

If you inspect the code you can see the loaded files:

enter image description here

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)