Font Awesome 5 图标未在 Chrome 上的元素之前呈现

Question

我添加了一个 Font Awesome 5 字符作为伪 :before 内容到

元素。该图标在 Firefox (v74) 中正确呈现，但在 Chrome (v80) 中它看起来只是一个轮廓 square/missing 字符。

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

这里是 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";
    }

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

Answer 1

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

此外，您还必须设置 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>

Font Awesome 5 图标未在 Chrome 上的元素之前呈现

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

css

google-chrome

pseudo-element

font-awesome

font-awesome-5