Font Awesome 5 Shows Empty Square When Using the Js+Svg Version

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 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 not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

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 content not showing up when defined inside sass

You need to specifiy the font-family for the :after pseudo-element and also maybe - display: block or display: inline-block to allow it to render ...

And also - since you are setting this to be position: absolute - - you will need to set its parent element to be position: relative to allow the correct positioning....

   .menu-list s span { 
     position: relative; // added this - to allow absolute poisitioning of the icon within the span.
   } 

&:after {
  content: "\f105",
  position: absolute,
  right: 30px,
  transition: all 0.5s,
  font-weight: 900,
  font-style: normal,
  font-family: FontAwesome, // added this line
  display: block, // added this line
  ...
}

Some font awesome brands don't work (show square) event though other work fine

You're mixing the Font Awesome 5 stylesheet with Font Awesome 4 syntax. The problem can be fixed in one of two ways:

Load a stylesheet for an older version, or preferably
Double check your class names and be sure to use the current standard.

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 Shows Empty Square When Using the Js+Svg Version