Font-awesome 5 showing white box on pseudo elements? [duplicate] - html

Question

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.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 know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).

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;
}
<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>
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 <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.

Answer 2

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;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/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><br>
<a class="user" href="#">User</a>

Answer 3

If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"