Font Awesome 5, why is CSS content not showing?

Question

I am trying to use FontAwesome in the content of CSS.

It appears with the code for the icon instead of the icon. I have followed the online helps but still not working

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Solution 1

^{If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version}

First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Or within the CSS file:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

Then you need to correct the font-family and the content like below:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

<i class="fp-prev"></i>

In some cases, you have to also add

font-weight:900

More detail here: Font Awesome 5 on pseudo elements shows square instead of icon

---

As a side note: Font Awesome 5 provide 4 different font-family for each pack of icons:

Font Awesome 5 Free for the free icons.

Font Awesome 5 Brands for the brand icons like Facebook, Twitter, etc.

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
  color: #000;
  content: "\f099";
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

<i class="fp-prev"></i>

Font Awesome 5 Pro for the Font Awesome Pro.

Font Awesome 5 Duotone also included in the Pro package.

Related: Font Awesome 5 Choosing the correct font-family in pseudo-elements

Solution 2

Make your font-weight: 900;. I see you miss it

Solution 3

This is not showing because of color -issue . Please follow step :-

Step- 1. Copy this style in your page

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">

Step- 2. copy this code at the top of your all.css in your page .

@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css"); 

Step- 3. Use the font-family and the content and color like

   .password_invalid:before {
        color: #ff0000;
        content: '\f058';                     /* You should use \ and not /*/
        font-family: "Font Awesome 5 Free";  /* This is the correct font-family*/
        position: relative;
        margin-left: -36px;
        padding-right: 13px;
        font-weight: 400;
    }

Comments

[Chandra Shekhar]

@font-face src should point to font file..

[Saravana]

Add position similar like stackoverflow.com/questions/14736496/…

[Chandra Shekhar]

if you are using font awesome 5 offline include webfonts folder also

[Temani Afif]

we don't need the font-face at all ... simply the CSS file

[Saravana]

@Gobbin He asking about font awesome not font-family.

[happycoding]

The element that requires the icon is being loaded as port of a script so i cant add the <i> tag. is the i tag required?

[Temani Afif]

@happycoding no it's not required, i only used to show the class working ... you only need to use the class

[happycoding]

perfect thank you, it was the font family name and me not using the import css for the font. works a dream!

[Temani Afif]

You said the accepted answer doesn't help you: can you explain me the things in your answer that aren't already said in the accepted answer? you basically repeated everything if I am not mistaken

[BEingprabhU]

At the end of my answer, I've added a note highlighted to change the font-weight. That is the change what I'm talking about. The font-weight issue is raised in GitHub as well. Please refer the link. Your answer really didn't help. On changing the font-weight it worked.

[BEingprabhU]

I had to repeat the same as written in your answer because that is the way how you are displaying any icons. If I had just added font-weight it wouldn't have been that specific. Anyway, sorry for the repetition.

[Temani Afif]

I am also detailing the font-weight issue in my answer at the end exactly like you did again.

[Karra Max]

When I find something I was already finding without a solution so not easy, I want to give a thousand likes.

[priyamtheone]

@Temani Afif: Thanks for this snippet. I nearly spent two hours trying to render a font-awesome 5 icon, but couldn't, despite correctly writing the CSS pseudo element rule. Your link statement solved the problem. I have a question, though. How do I know from where to import the CSS file of Font Awesome, especially which version? Trying to visit use.fontawesome.com doesn't lead anywhere. So how do I know which other versions of Font Awesome CSS files are available and where can I get them from? Please explain.

[Temani Afif]

@priyamtheone don't bother yourself with the versions. Always pick the latest one. The version doesn't impact how it works but it's only to add more icons. Some icons may not be available in some version but if you pick the latest one you won't have any issue. For the files, you get them by following this: fontawesome.com/start .. you enter you mail and you will get all the detail and what file to include