Search code examples
cssfont-awesomefont-awesome-5

Font awesome 5 pseudo-class not working with my kit

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.

Solution

  • 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