Font Awesome 5, why is CSS content not showing?

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

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


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