Font Awesome Bullet Point

HTML

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

CSS

ul li {
   list-style: none;
}

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