Font Awesome 5 icon not rendering in :before element on Chrome

Question

I added a Font Awesome 5 character as pseudo :before content to an <li> element. The icon renders correctly in Firefox (v74) but in Chrome (v80) it only looks like an outline square/missing character.

The same icon added as element renders correctly in both browsers.

Here's a fiddle: JS Fiddle

    ul li {
       list-style: none;
    }

    ul li:before {
            margin-right: 10px;
            font-family: 'Font Awesome 5 Pro Solid';
            content: '\f0c8';
            color: "#cc0000";
    }

Is there a workaround to make the icon show in Chrome?

Answer 1

Your jsfiddle has incorrect font-family specified.
The correct one is Font Awesome 5 Free (for the CDN font link you used).

Also you have to set font-weight: 900 to have bold squares.

ul li {
   list-style: none;
}

ul li:before {
        margin-right: 10px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f0c8';
        color: #c00;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

As a list bullet (li:before) Firefox (v74) shows correct full square icon, Chrome (v80) shows an outlined square like missing character.

<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>

Inserted as 'normal' &lt;i&gt; element, the icon shows in both browsers: <i class="fas fa-square"></i>