Font awesome 5 pseudo-class not working with my kit

Question

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.

kitnumber is not a file this is an number that is given by font awesome — Ahmed Ali, Jan 11 '20 at 06:04
Yes, correct. I haven't added here. I just added kitnumber.js — Naren Verma, Jan 11 '20 at 06:07
Typo: You have 'fas fa-thumbs-up' here. It should be 'fa fa-thumbs-up'. — Mugé, Jan 11 '20 at 06:22
@Mugé, I downloaded the example from font awesome and it is — Naren Verma, Jan 11 '20 at 06:29
What is this kitnumber.js? If you can prevent it, use less script and more css. Just for one little icon, I don't think it is worth it. — Mugé, Jan 11 '20 at 06:35
@Mugé, kitnumber.js is my kit script that i haven;t shared It is just a example. — Naren Verma, Jan 11 '20 at 08:10
you need to keep the same font family, don't change it because you will no more use the V5 but the V4. Check the duplicate for the correct answer — Temani Afif, Jan 11 '20 at 09:33
@TemaniAfif, I used font-family: FontAwesome; insted of font-family: 'Font Awesome 5 Free'; is it correct? — Naren Verma, Jan 11 '20 at 10:09
no, `FontAwesome` is the font-family of the previous version, not the one of FA5. You need to keep the same font and consider the duplicate to fix your issue. Your code works fine with the CSS version and you are missing a configuration for the JS one — Temani Afif, Jan 11 '20 at 10:12
@TemaniAfif, If I use css then it's working but If I use my kit then it's not working. So I used FontAwesome — Naren Verma, Jan 11 '20 at 10:13
@TemaniAfif, I added font-family: "Font Awesome 5 Free"; and data-search-pseudo-elements to the script but not getting icon. I have a doubt why you use display:none; to the Pseudo class — Naren Verma, Jan 11 '20 at 10:28
you should get it: https://jsfiddle.net/rkfmqbLa/ .. you are either not using the correct unicode or something else — Temani Afif, Jan 11 '20 at 10:30
then you have for sure the PRO version: https://jsfiddle.net/rkfmqbLa/1/ — Temani Afif, Jan 11 '20 at 10:42
@TemaniAfif, Yes this time it is displying. You added font-family: 'Font Awesome 5 Pro'; correct? — Naren Verma, Jan 11 '20 at 10:52
@TemaniAfif, Please add your answer, I have to accept it. Because this is the correct answer. — Naren Verma, Jan 11 '20 at 10:54

Temani Afif · Accepted Answer · 2020-03-24T22:17:46.130

3

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:

edited Mar 24 '20 at 22:17

answered Jan 11 '20 at 11:03

Temani Afif

245,468
26
309
415

I want to ask one question for security, Do I need to use https://kit.fontawesome.com/97446b8f60.js in my page or change the name of the file? Because anyone can use my script – Naren Verma Jan 11 '20 at 11:08
@NarenVerma no, this is my kit, you can keep using your own kit ... you can by the way change the ID to anything you want – Temani Afif Jan 11 '20 at 11:09
@NarenVerma there is no issue if someone is using your script unless you are paying for the PRO features. If it's the free, then there is no problem – Temani Afif Jan 11 '20 at 11:10
Oh! that's cool!... thanks for the help. Finally, I got the correct information and answer. Upvote from my side. – Naren Verma Jan 11 '20 at 11:11
@NarenVerma if you are intrested you can check the update. It was indeed a bug and the use of Free is the correct way but we need to consider Pro until it's fixed – Temani Afif Jan 11 '20 at 12:12
Oh!.. Let me check the bugs.. Thanks for the help again – Naren Verma Jan 11 '20 at 12:21
Let me know if you found the answer on github. – Naren Verma Jan 11 '20 at 12:25
@NarenVerma the answer is to use my code until the bug get fixed – Temani Afif Jan 11 '20 at 12:27
Yes, I am using your answer, in my project. – Naren Verma Jan 11 '20 at 12:28

Ahmed Ali · Answer 2 · 2020-01-11T06:16:25.890

0

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;

edited Jan 11 '20 at 06:16

answered Jan 11 '20 at 06:12

Ahmed Ali

1,908
14
28

1

I think you haven't read my last comment. I know the kit number but I haven't added in this question because I don't want to share my kit number. I am using corrct kit script which is given by font awesome. – Naren Verma Jan 11 '20 at 06:14
1

@AhmedsaysReinstateMonica obviously by accident. Good answer. I didn't know about the kit number, I learned something new. – Mugé Jan 11 '20 at 06:53

Font awesome 5 pseudo-class not working with my kit

2 Answers2

Linked

Related