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

Question

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:

Answer 1

As stated in the docs of Font Awesome of how to enable Pseudo class...

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f058";
  display: none;
}
.user::before{
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
  display: none;
}

  
List Item 1
  
List Item 2
  
List Item 3
  
List Item 4
  
List Item 5



User