Font Awesome 5 font-family issue

CssFontsFont Awesome-5

Css Problem Overview

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'

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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

Solution 3 - Css

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

Solution 4 - Css

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

Solution 5 - Css

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.

Solution 6 - Css

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: https://stackoverflow.com/questions/47712987/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";

Solution 7 - Css

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

Solution 8 - Css

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

Solution 9 - Css

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.

Solution 10 - Css

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!

Solution 11 - Css

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.

Solution 12 - Css

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

Solution 13 - Css

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>

Solution 14 - Css

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

Solution 15 - Css

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.

Solution 16 - Css

Add the fas class.

Like:

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

Without the fas the icon will not be loaded

Solution 17 - Css

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';
Categories
Recommended Css Solutions
Recommended Fonts Solutions
Recommended Font Awesome-5 Solutions

Previous Solution:

Xcode: "This app could not be installed at this time."

IosXcodeIos11xcode9.2

Next Solution:

Optional property class in typescript

TypescriptProperties

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCarmelo ValentiView Question on Stackoverflow
Solution 1 - CssPedramView Answer on Stackoverflow
Solution 2 - CssLenin ZapataView Answer on Stackoverflow
Solution 3 - Csswww.admin.geView Answer on Stackoverflow
Solution 4 - CssJTStuedleView Answer on Stackoverflow
Solution 5 - Cssuser3006765View Answer on Stackoverflow
Solution 6 - CssMesaView Answer on Stackoverflow
Solution 7 - CssWojCupView Answer on Stackoverflow
Solution 8 - CssElliyas A.View Answer on Stackoverflow
Solution 9 - CsscssyphusView Answer on Stackoverflow
Solution 10 - CssTan NguyenView Answer on Stackoverflow
Solution 11 - CssLeonard203View Answer on Stackoverflow
Solution 12 - CssMenzezzzView Answer on Stackoverflow
Solution 13 - CssMichal Miky JankovskýView Answer on Stackoverflow
Solution 14 - CssCarmelo ValentiView Answer on Stackoverflow
Solution 15 - CssJuriView Answer on Stackoverflow
Solution 16 - CssWQTMView Answer on Stackoverflow
Solution 17 - CssstarkmView Answer on Stackoverflow