The "Before" Pseudo Element Not Working in Font Awesome V.5

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

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

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>

load font-awesome icon in ::before and ::after pseudo element

Adding the font-awesome stylesheet to your code and it will load the icon.

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.x::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>

Font Awesome 5 icon not rendering in :before element on Chrome

Your jsfiddle has incorrect font-family specified.

The correct one is Font Awesome 5 Free (for the CDN font link you used).

Also you have to set font-weight: 900 to have bold squares.

ul li {

   list-style: none;

}

ul li:before {

        margin-right: 10px;

        font-family: 'Font Awesome 5 Free';

        font-weight: 900;

        content: '\f0c8';

        color: #c00;

    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

As a list bullet (li:before) Firefox (v74) shows correct full square icon, Chrome (v80) shows an outlined square like missing character.

<ul>

<li>Bullet 1</li>

<li>Bullet 2</li>

</ul>

Inserted as 'normal' <i> element, the icon shows in both browsers: <i class="fas fa-square"></i>

---

Related Topics