Font Awesome 5图标未在Chrome上的：before元素中呈现[重复]

Question

此问题已经在这里有了答案：

Font Awesome 5 Choosing the correct font-family in pseudo-elements（1个答案）

Font Awesome 5 on pseudo elements shows square instead of icon（1个答案）

已关闭1分钟前。

我在

元素中添加了Font Awesome 5字符作为伪：before。该图标在Firefox（v74）中可正确呈现，但在Chrome（v80）中，它仅看起来像轮廓正方形/缺少字符。

添加为元素的相同图标在两个浏览器中均正确呈现。

这里是小提琴：JS Fiddle

    ul li {
       list-style: none;
    }

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

是否有解决方法可以在Chrome中显示图标？

Answer 1

您的jsfiddle指定了不正确的font-family。正确的是Font Awesome 5 Free（用于您使用的CDN字体链接）。

此外，您还必须将font-weight: 900设置为粗体。

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>