Font Awesome 5, why is CSS content not showing?

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