Font Awesome 5 on Pseudo Elements Shows Square Instead of Icon

Font Awesome 5 on pseudo elements shows square instead of icon

^{If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version}

You need to add

`font-weight:900`

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>

Font-Awesome displaying square instead of icon using CSS Pseudo After

(Posted on behalf of the question author, to move it from the question to the answer section).

Problem has been solved. This whole issue was due to using an outdated version of Font-Awesome. So for anyone who is running across this issue, please make sure that you are using the most current version of Font-Awesome!

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>

Font Awesome 5 shows empty square when using the JS+SVG version

^{If you are using the CSS version read this: Font Awesome 5, why css content is not showing?}

Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:

ul {  list-style: none;}
.testitems {  line-height: 2em;}
.testitems:before {  font-family: "Font Awesome 5 Free";  content: "\f058";  display:none; /* We need to hide the pseudo element*/}/*target the svg for styling*/.testitems svg {  color: blue;  margin: 0 5px 0 -15px;}

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script><ul>  <li class="testitems">List Item 1</li>  <li class="testitems">List Item 2</li>  <li class="testitems">List Item 3</li>  <li class="testitems">List Item 4</li>  <li class="testitems">List Item 5</li></ul><i class="fa fa-user"></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>

Square icon when using fontawesome icons

In place of using this

<i class="fa fa-user"></i>

You're using this one

<i class="fas fa-user"></i>

You have to remove s from that icon.

Your giving the link font awesome 4 and using the icon from font awesome 5 that's why it's not working. if you giving the font awesome 4 links so you have to remove s from that icon or else if you don't want to remove s from that icon so you have to use font awesome 5 links.

This is the font awesome 5 link.

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" 
 integrity="sha384- 
 fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
 crossorigin="anonymous">

Font Awesome 5 on Pseudo Elements Shows Square Instead of Icon