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

^{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;
}

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

You can check the documentation for more details :

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

Enable Pseudo Elements

Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the