Font Awesome 5 Pseudo-Class Not Working with My Kit

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>

The before pseudo element not working in Font awesome v.5

UPDATE 3:

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

And maybe you have to set a font-weight see documentation

UPDATE 2: TL;DR

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

For Font Awesome 5 this must be one of the following:

Updated because you use css webfonts:

For method Web Fonts with CSS

Free

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Brands => use this!

font-family: "Font Awesome 5 Brands"

See here:
https://jsfiddle.net/nwodoo32/1/

For method SVG with Javascript

Solid

font-family: "Font Awesome 5 Solid"

Regular

font-family: "Font Awesome 5 Regular"

Brands

font-family: "Font Awesome 5 Brands"

Light (Pro)

font-family: "Font Awesome 5 Light"

Font awesome 5 on pseudo elements

You need to enable it (it's disabled by default).

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

Css:

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

Other types:
Font Awesome 5 + Solid or Regular or Light or Brands

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>

Why isn't my Fontawesome icon showing as a pseudo element?

Hi From what I know pseudo element do not work on input fields.
What you could do is put a span element inside the input and set the icon there or in your case put it in the parent div of the input.

Font Awesome in CSS pseudo elements not showing

The Font family should specify Free.

Also note that for solid icons you would have to use font-weight:900

a[data-toggle="collapse"] {  position: relative;}
a[aria-expanded="false"]::before,a[aria-expanded="true"]::before {  font-family: "Font Awesome 5 Free";  content: "\f106";  font-weight: 900;  display: block;  position: absolute;  right: 20px;  font-size: 0.6em;}
a[aria-expanded="true"]::before {  font-family: "Font Awesome 5 Solid";  content: "\f106";}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" /><div class="wrapper">  <nav id="sidebar">    <li class="active">      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">        <i class="far fa-file-alt"></i> Pages      </a>    </li>  </nav></div>

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 not working in CSS pseudocode

You have an extra space between .toggle and ::before.

.toggle{
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #da7f8f;
    cursor: pointer;
}
.toggle::before{
    content: '\f0c9';
    font-family:"Font Awesome 5 Free";
    position: absolute ;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 24px;
    font-weight: 900;
    color: black;
    
}

<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/af3b78fe80.js" crossorigin="anonymous"></script>
<div class="toggle"></div>

Font Awesome 5 Pseudo-Class Not Working with My Kit