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; } 

Answer 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

Answer 2

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