[css] Font Awesome 5 font-family issue

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'

This question is related to css fonts font-awesome-5

The answer is


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.


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

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 */
}

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

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

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


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>

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.


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

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.


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.


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.

_x000D_
_x000D_
 @font-face {_x000D_
    font-family: 'Font Awesome 5 Brands';_x000D_
    font-style: normal;_x000D_
    font-weight: normal;_x000D_
    src: url("../webfonts/fa-brands-400.eot");_x000D_
    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"); }_x000D_
_x000D_
    .fab {_x000D_
    font-family: 'Font Awesome 5 Brands'; }_x000D_
    @font-face {_x000D_
    font-family: 'Font Awesome 5 Brands';_x000D_
    font-style: normal;_x000D_
    font-weight: 400;_x000D_
    src: url("../webfonts/fa-regular-400.eot");_x000D_
  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"); }
_x000D_
_x000D_
_x000D_


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

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!


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