Css 字体Awesome 5图标未在Chrome上的：before元素中呈现

我在

元素中添加了一个字体5字符作为pseudo:before content。该图标在Firefox（v74）中正确呈现，但在Chrome（v80）中，它看起来只是一个轮廓正方形/缺少的字符

添加为元素的同一图标在两种浏览器中都能正确呈现

这是一把小提琴：

---

是否有解决办法使图标在Chrome中显示？

您的JSFIDLE指定了不正确的

字体系列。

正确的是
Font-awome 5 Free
（用于您使用的CDN字体链接）

此外，您还必须设置
font-weight:900
以使用粗体方框


ulli{
列表样式：无；
}
李：以前{
右边距：10px；
字体系列：“字体真棒5免费”；
字号：900；
内容：'\f0c8'；
颜色：#c00；
}

当列表项目符号（li:before）Firefox（v74）显示正确的全正方形图标时，Chrome（v80）显示一个略带方形的缺少字符。

子弹1
子弹2

作为“normal”i元素插入，图标在两种浏览器中都显示：
Ah是的，CDN来自JSFIDLE。。。但是，即使使用了“Font Awesome 5 Free”，它也不会显示出来，但是您建议在li作品中添加class=“fas fa square”。这对我来说是新的，是在FA5文件中吗？但它并不能很好地解决我的问题，因为我希望所有li都像这样，而不向每个元素添加一个类。如果这是一个Chrome bug，我能想到的唯一其他选择就是使用背景图像。@kiwiana，终于找到了！看到更新的答案。哦，我记得从FA5开始的字体重量问题…我没有想到，因为它在FF中呈现ok。对于Chrome来说，每一个超过600的字体似乎都是有效的。谢谢
    ul li {
       list-style: none;
    }

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