Font Awesome 5, why css content is 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;
}

Answer 1

^{Read this if you are using the JS+SVG version: 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.8.1/css/all.css">

Or within the CSS file:

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

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

@import url("https://use.fontawesome.com/releases/v5.8.1/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;
    text-decoration: inherit;
}

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

As a side note: Font Awesome 5 provide 3 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.8.1/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

---

In some cases, you have to adjust the value of the font-weight like detailed here: Font Awesome 5 on pseudo elements shows square instead of icon

Answer 2

I know I'm really late to answer this. But the accepted answer didn't help me. After making a bit of research I found this.

You have to include Fontawesome CSS in the header.

CDN -

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

If you have downloaded the source files then include as follows

<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />

Later you have to add the CSS as follows -

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* replace / with \ */
    font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
}

if you wish to add it via <i> tag then you can follow

<i class="fas fa-arrow-alt-circle-right"></i>

Make sure your font weight is 900.

Refer - https://github.com/FortAwesome/Font-Awesome/issues/11946

An issue was raised in GitHub for the same. They have suggested that for the solid font awesome icons the font-weight should be 900.

Hope this will help you all.

Answer 3

When you want to include FontAwesome the url you provided should be inside thehead tag as a stylesheet file:

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

Then you can use Font Awesome as you have done.