Font Awesome 5, why css content is not showing?

问题

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

回答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

回答2:

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

回答3:

This Happened to me too. I had used this icon: as was using font awesome 5 cdn.

But when I tried to select the same class and then edit the icon, the css editing didn't run on the icon.

So the removed the "fas" from ".fas fa-plus-square" on the css selector and made it ".fa-plus-square{}".

So the CSS was like this (for me) : .fa-plus-square{ float: right; } where i removed the "fas". And it worked for me.

where the Html class was <i class="fas fa-plus-square"></i>

And the cdn that I used: "https://use.fontawesome.com/releases/v5.0.7/css/all.css". Hope this helps you

回答4:

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.

回答5:

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.

来源：https://stackoverflow.com/questions/49690006/font-awesome-5-why-css-content-is-not-showing

标签

css

font-awesome

pseudo-element

font-awesome-5