Font Awesome 5 font-family issue

Question

I integrated Font Awesome 5 in a project with bootstrap 4. When I recall a font via CSS it does not work. with Font Awesome 4 the code was as follows:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  float: right;
  content: "\f107";
  font-family: "FontAwesome";
}

I tried to change the font name but it does not work

font-family: 'Font Awesome 5 Free'

In my case I wasn't including the font-weight, which is apparently required. — Micah Murray, Jan 26 '18 at 19:38
@MicahMurray I had the exact same problem. Been staring at my screen for the last 15 min haha.. — Bas van Dijk, Jul 31 '18 at 14:10
If some people are still having trouble with this the font-weight may need to be 900. Took an hour before I realized this on my particular issue... — Jester, May 30 '19 at 16:49
Related question: https://stackoverflow.com/q/49754892/8620333 (to fix the font-weight issue) — Temani Afif, Feb 20 '20 at 10:52

Pedram · Accepted Answer · 2018-05-29T19:47:11.023

202

Your Unicode is wrong f107

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

Or in other case, font-weight: 900; will save you. Some icons in font awesome 5 not working without font-weight: 900;.

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

edited May 29 '18 at 19:47

answered Dec 13 '17 at 09:07

Pedram

15,766
10
44
73

6

Work it. but for use f107 icon (avaiable only solid free) use [code] font-awesome/css/fontawesome.css" rel="stylesheet" /> font-awesome/css/fa-solid.css" rel="stylesheet" />[/code] – Carmelo Valenti Dec 13 '17 at 09:44
1

@CarmeloValenti But i used `All` version, it should work, but it still not working. – Pedram Dec 13 '17 at 09:47
4

It's a bug. including all icon, are not shown the icons "solid" that are not present in the "regular" package, so you have to exclude the (few) "regular" icons if you want to use all the "solid" – Carmelo Valenti Dec 13 '17 at 10:04
3

Hello, I have the same problem. @Carmelo, could you elaborate your answer better to make us understand? – Dev Dec 15 '17 at 16:45
4

I was banging my head on this for hours, font-weight: 900;is the thing! thanks – Shamseer Ahammed Jan 14 '19 at 10:31
4

font-weight to the rescue. AHhhh, wish i had come across this before. Would have saved me hours trying to figure this out! – Diego Apr 25 '19 at 00:32
1

+1 I needed single-quotes on `font-family` \o/ MacOS Chrome Version 75.0.3770.100 (Official Build) (64-bit) – danwild Jul 09 '19 at 03:52
1

Thank you! I was desperate for solution. Works like charm. – Ana Kochevska Feb 24 '20 at 12:11
1

Thank you. Even for `Font Awesome Free 5.13.0`, I still needed to add `font-weight: 900` to make icons like `f107` or `f106` work. – Hrishikesh Apr 30 '21 at 10:57

score 107 · Answer 2 · answered Mar 30 '18 at 01:59

107

Strangely you must put the 'font-weight: 900' in some icons so that it shows them.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}

answered Mar 30 '18 at 01:59

Lenin Zapata

1,417
1
11
14

6

Woah! Thanks for that 5.0.9 font-weight fix. That was the only thing missing in my code. – Julien B. Apr 08 '18 at 23:24
This already fixed on updated version with `.fa, .fas { font-weight: 900; }` – Pedram Apr 28 '18 at 07:15
Awesome! I'm using 5.1.0, still had to solve this with `font-weight:900;` – smartrahat Jul 01 '18 at 14:01
3

It's because the font weight is called in the `.fa, .fas` classes. If you're doing a custom class, including `:before` or `:after` pseudo classes, then it seems we still have to apply the `font-weight: 900;` value. – Okomikeruko Feb 19 '19 at 16:03
Even on 5.13.0, I had to add `font-weight: 900` for fixing it. Thank you! – Hrishikesh Apr 30 '21 at 10:55

score 26 · Answer 3 · edited Mar 02 '18 at 00:12

26

The problem is in the font-weight.
For Font Awesome 5 you have to use {font-weight:900}

edited Mar 02 '18 at 00:12

Maak

4,720
3
28
39

answered Mar 01 '18 at 12:50

GRigol

393
4
7

score 15 · Answer 4 · answered Feb 15 '18 at 07:20

Using the fontawesome-all.css file: Changing the "Brands" font-family from "Font Awesome 5 Free" to "Font Awesome 5 Brands" fixed the issues I was having.

I can't take all of the credit - I fixed my own local issue right before looking at the CDN version: https://use.fontawesome.com/releases/v5.0.6/css/all.css

They've got the issue sorted out on the CDN as well.

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

score 7 · Answer 5 · answered Aug 22 '18 at 21:46

Requiring 900 weight is not a weirdness but a intentional restriction added by FontAwesome (since they share the same unicode but just different font-weight) so that you are not hacking your way into using the 'solid' and 'light' icons, most of which are available only in the paid 'Pro' version.

Mesa · Answer 6 · 2017-12-13T10:53:24.580

6

Since FontAwesome 5, you have to enable a new "searchPseudoElements" option to use FontAwesome icons this way:

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

See also this question: Font awesome 5 on pseudo elements and the new Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api

Additionaly, change font-family in your CSS code to

font-family: "Font Awesome 5 Regular";

edited Dec 13 '17 at 10:53

answered Dec 13 '17 at 10:47

Mesa

289
2
10

Thank you for this, I'll just add that I needed to place this script ABOVE the kit script – Purple Tentacle Jul 12 '19 at 00:07

score 4 · Answer 7 · edited Jun 01 '18 at 21:20

4

I didn't want to use the 'all' version, so searched the 'fontawesome-all.min.css' file (previously included in the header) for 'family' tag and found at the end a declaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

So, in the stylesheet for an element where I wanted to use the content: "\f0c8"; code, I've added (or changed to) font-family: Font Awesome\ 5 Free; and it worked.

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}

edited Jun 01 '18 at 21:20

Zoe

27,060
21
118
148

answered Feb 08 '18 at 22:57

WojCup

83
4

1

Thanks, I did similar but omitted font-weight: 900 which caused some icons not to work. This version seems a mess since it's not very backwards compatible, with some icons even getting new codes. – mhapps Feb 25 '18 at 20:44

score 4 · Answer 8 · edited Aug 20 '19 at 15:41

Strangely you have to include the font-family and the font-weight for it to work. Here is what worked for me:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

From there, you can begin adding any styles that you want.

Let's say:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 100px;
    color: white;
    z-index: 1;
    position: absolute;
}

I hope this helps.

Elliyas Ahmed · Answer 9 · 2019-10-03T17:50:35.850

4

I had tried all above the solutions for Font Awesome 5 but it wasn't working for me. :(

Finally, I got a solution!

Just use font-family: "Font Awesome 5 Pro"; in your CSS instead of using font-family: "Font Awesome 5 Free OR Solids OR Brands";

edited Oct 03 '19 at 17:50

answered Sep 26 '19 at 07:15

Elliyas Ahmed

101
1
1
10

score 3 · Answer 10 · answered Aug 24 '20 at 16:21

IF it's still not working for you, I had forgotten to add the fa-ul class onto the parent (UL) element:

<ul class="fa-ul">

Together with the 2 bits of advice provided already by others:

a) font-family: 'Font Awesome\ 5 Free';
b) font-weight: 900;

solved it for me.

FWIW, the include in my <head> tags is just:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

And I am using this with React and Preact. No need for any special React npm installs or components.

In my case, with Ver 5.20, the upper layer having a `font-weight: 500` resulted Font Awesome not display. Adding itself a `font-weight: N!important` where `N > 500` brings it back. Guess it is the way Font Awesome rendering cause some conflict. — seedme, Sep 20 '21 at 03:23

score 2 · Answer 11 · answered Oct 22 '18 at 10:09

npm i --save @fortawesome/fontawesome-free

My Sccs:

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

It worked fine for me!

score 1 · Answer 12 · answered Jun 01 '18 at 21:09

1

the solution is call it like normal font:

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}

answered Jun 01 '18 at 21:09

Menzezzz

11
2
8

score 1 · Answer 13 · answered Jun 26 '19 at 06:11

that's probably about pricing model... ;)

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Solid    Free           fas   <i class="fas fa-camera"></i> 
Regular  Pro Required   far   <i class="far fa-camera"></i> 
Light    Pro Required   fal   <i class="fal fa-camera"></i> 
Brands   Free           fab   <i class="fab fa-font-awesome"></i>

score 0 · Answer 14 · edited Jun 01 '18 at 21:18

0

I found a solution.

Integrate fontawesome-all.css
At the end of file Search the second @font-face and replace

font-family: 'Font Awesome 5 Free';

With

font-family: 'Font Awesome 5 FreeR';

And replace:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

With

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }

edited Jun 01 '18 at 21:18

Zoe

27,060
21
118
148

answered Dec 14 '17 at 11:40

Carmelo Valenti

793
1
6
4

If you have a new solution, please update your previous answer and delete this post. – Pedram Jan 15 '18 at 07:35

score 0 · Answer 15 · answered Aug 05 '18 at 22:09

0

If you are using SVG with JavaScript you need to enable this because it's disabled by default. Use

<script data-search-pseudo-elements ... >

inside your script tag.

answered Aug 05 '18 at 22:09

Juri

1,531
2
20
43

score 0 · Answer 16 · answered Mar 14 '22 at 14:28

0

Add the fas class.

Like:

  <i class="fas fa-solid fa-angle-left"></i>

Without the fas the icon will not be loaded

answered Mar 14 '22 at 14:28

wriozumi

569
6
6

score 0 · Answer 17 · answered Oct 17 '22 at 02:17

If it's still not working for you you should be able to see the code line in your page source (Right Click -> select "View Page Source") where you have imported the FontAwesome stylesheet.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

If you click on that, it will open the stylesheet in a new tab. In the top part of the stylesheet you will be able to see the name of the font family.

Then you can change the font-family only for the icons which are breaking with the new font used in the web page.

#primary-menu .fa-angle-down:before {
    font-family: 'FontAwesome', sans-serif;
    /* Changing the icons to FontAwesome font to stop breaking when the font is changed in the site */
}

starkm · Answer 18 · 2019-01-21T00:21:45.450

-1

I had to set searchPseudoElements to to true to get it working in Angular5.

import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';

edited Jan 21 '19 at 00:21

answered Apr 12 '18 at 01:22

starkm

859
1
10
21

Font Awesome 5 font-family issue

18 Answers18

Linked