Font awesome 5 pseudo-class not working with my ki

2020-05-10 07:01发布

站内文章 / HTML/CSS
50 0 0

问题:

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.

回答1:

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

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:



回答2:

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.

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;


标签： css font-awesome font-awesome-5
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~