font-awesome-5

I'm currently confused in using the icon in CSS pseudo-elements. There are 4 kind of font-family for fontawesome : Font Awesome 5 Free , Font Awesome 5 Solid , Font Awesome 5 Brands , Font Awesome 5 Regular Here is the HTML : <h1>Hello</h1> Case 1 I use this icon : https://fontawesome.com/icons/twitter?style=brands As you can see, its a brands icon, so font-family : Font Awesome 5 Brands h1:before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f099"; /* TWITTER ICON */ font-family: "Font Awesome 5 Brands"

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.8.1/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