32

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;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
happycoding
  • 458
  • 1
  • 5
  • 13

6 Answers6

103

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • The element that requires the icon is being loaded as port of a script so i cant add the tag. is the i tag required? – happycoding Apr 06 '18 at 11:06
  • @happycoding no it's not required, i only used to show the class working ... you only need to use the class – Temani Afif Apr 06 '18 at 11:15
  • perfect thank you, it was the font family name and me not using the import css for the font. works a dream! – happycoding Apr 06 '18 at 11:19
  • When I find something I was already finding without a solution so not easy, I want to give a thousand likes. – Karra Max Aug 28 '20 at 19:01
  • @Temani Afif: Thanks for this snippet. I nearly spent two hours trying to render a font-awesome 5 icon, but couldn't, despite correctly writing the CSS pseudo element rule. Your link statement solved the problem. I have a question, though. How do I know from where to import the CSS file of Font Awesome, especially which version? Trying to visit use.fontawesome.com doesn't lead anywhere. So how do I know which other versions of Font Awesome CSS files are available and where can I get them from? Please explain. – priyamtheone Sep 10 '21 at 19:03
  • @priyamtheone don't bother yourself with the versions. Always pick the latest one. The version doesn't impact how it works but it's only to add more icons. Some icons may not be available in some version but if you pick the latest one you won't have any issue. For the files, you get them by following this: https://fontawesome.com/start .. you enter you mail and you will get all the detail and what file to include – Temani Afif Sep 10 '21 at 19:23
26

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

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Musfiq Shanta
  • 1,298
  • 13
  • 9
2

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;
    }
JAVA Study
  • 29
  • 1
0

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

Prottay Rudra
  • 187
  • 2
  • 9
-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.

Gobbin
  • 530
  • 3
  • 17
-3

I know I'm really late to answer 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.

BEingprabhU
  • 1,618
  • 2
  • 21
  • 28
  • 2
    You said the accepted answer doesn't help you: can you explain me the things in your answer that aren't already said in the accepted answer? you basically repeated everything if I am not mistaken – Temani Afif Jun 19 '19 at 20:53
  • At the end of my answer, I've added a note highlighted to change the font-weight. That is the change what I'm talking about. The font-weight issue is raised in GitHub as well. Please refer the link. Your answer really didn't help. On changing the font-weight it worked. – BEingprabhU Jun 20 '19 at 05:31
  • I had to repeat the same as written in your answer because that is the way how you are displaying any icons. If I had just added font-weight it wouldn't have been that specific. Anyway, sorry for the repetition. – BEingprabhU Jun 20 '19 at 05:37
  • I am also detailing the font-weight issue in my answer at the end exactly like you did again. – Temani Afif Jun 20 '19 at 07:56