Font Awesome 5 Font-Family Issue

Font Awesome 5 font-family issue

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>

Font Awesome 5 Choosing the correct font-family in pseudo-elements

Simply use all of them in the same font-family and the browser will do the job. If it doesn't find it in the first one, it will use the second one. (Multiple fonts in Font-Family property?)

By the way, the correct font-family is Free not Solid because the difference between Solid and Regular is the font-weight and both have the same font-family. There is no Solid and Regular in font-family, only Free and Brands.

You may also notice that almost all the Solid version of the icons are free BUT not all the regular version are free. Some of them are included in the PRO package. If an icon is not showing it's not necessarely a font-family issue.

All the Light and duotone version are PRO ones.

.icon {

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";

}

.icon1:before {

  content: "\f099";

  /* TWITTER ICON */

  font-weight: 400;

}

.icon2:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 900;

}

.icon3:before {

  content: "\f095";

  /* PHONE ICON */

  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/

}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>

<div class="icon2 icon"></div>

<br>

<div class="icon3 icon"></div>

Font Awesome 5, why is CSS content not showing?

^{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>

Font Awesome 5 not working when adding icon through ::before

Here is the working example

.wrapper {
  width: 200px;
  position: relative;
}
.wrapper::before{
    font-family: "Font Awesome 5 Brands";
    content: "\f057";
    position: absolute;
    left: 0;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

.wrapper::after{
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    position: absolute;
    top: 5px;
    right: 0;
    font-weight: 900;
    font-size: 40px;
    z-index: 200;
}

input {
  height: 50px;
  width: 100%;
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<div class="wrapper">
  <input class="form-field" type="text">
</div>

Font Awesome 5, why don't brand icons work when using font-face?

You need to generate a new font for the brand icons because they don't belong to the same group as the solid one. Then you can simply use both font together and the browser will pick the needed one:

/*!

 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com

 * License - https://fontawesome.com/license/free (Icons:CC BY 4.0, Fonts:SIL OFL 1.1, Code:MIT License)

 */

@font-face {

    font-family: 'my_font_awesome';

    font-style: normal;

    font-weight: 900;

    font-display: auto;

    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot);

    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.svg#fontawesome) format('svg');

}

@font-face {

    font-family: 'my_font_awesome_b';

    font-style: normal;

    font-weight: 400;

    font-display: auto;

    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot);

    src: url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.eot?#iefix) format('embedded-opentype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff2) format('woff2'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.woff) format('woff'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-brands-400.ttf) format('truetype'), url(https://use.fontawesome.com/releases/v5.13.0/webfonts/ffa-brands-400.svg#fontawesome) format('svg');

}

#btn_apple:before,

#btn_check:before,

#btn_facebook:before,

#btn_plus:before {

  font-family: 'my_font_awesome','my_font_awesome_b';

  margin-right: .6rem;

  margin-left: 1rem;

}

#btn_apple:before {content:'\f179'}

#btn_check:before {content:'\f00c'}

#btn_facebook:before {content:'\f082'}

#btn_plus:before {content:'\f067'}

<a id="btn_apple">Apple</a>

<a id="btn_check">Check</a>

<a id="btn_facebook">Facebook</a>

<a id="btn_plus">Plus</a>

Font awesome 5 pseudo-class not working with my kit

Update (24/03/2020): the bug is fixed starting from the version 5.13

---

You need to correct the font family to consider the use of Font Awesome 5 Pro

<!doctype html>

<html>

  <head>

    <!-- Place your kit's code here -->

    <script  src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>

    <style type="text/css">

      .f_icon:after{

         content: "\f164";

        font-family: 'Font Awesome 5 Pro';

        font-weight: 900;

      }

    </style>

  </head>

  <body>

    <div class="f_icon"></div>

  </body>

</html>

Font Awesome 5 - Why does Icon disappear when adjusting font-family?

Add the font-family of Font Awesome to the list so it get used for the icon:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

Before<br>

<i style="font-family: Verdana, Geneva, Tahoma, sans-serif" class="fa fa-plus-circle" >

Invoice number: </i>

<br>

After<br>

<i style="font-family: Verdana, Geneva, Tahoma, sans-serif, 'Font Awesome 5 Free'" class="fa fa-plus-circle" >

Invoice number: </i>

Getting error loading font awesome 5 in WP site

Can you try to add font-weight: 900; to your pseudo element. Docs says that Free Plan uses only Bold icons, it could be the issue.

\f04b looks like the one from Solid set of icons, so it uses only 900 "Bold" weight using Free Plan.

400 "Regular" is possible to use with Brand set of icons using Free Plan.

.custom-span {

  display: block;

  padding: 40px;

  margin-top: 50px;

}

.custom-span:before {

  content: "\f04b";

  font-weight: 900;

  font-family: "Font Awesome 5 Free";

}

<link href="//use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>

 <span class="custom-span"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur, dignissimos eos esse magnam neque provident rem? Ea, maiores praesentium? Ad cum doloremque dolores, error illum non porro temporibus voluptas.</span>

---

Related Topics