FontAwesome 图标在基于 chromium 的浏览器上根本不显示

Question

我正在尝试将一些主题从 fontawesome 4 更新到 5。到目前为止，一切似乎都运行良好，i 标签中的图标已显示。除了一个显示为 css 伪元素的特定图标。

我按照 FA 文档的说明进行操作，但图标仍然没有出现。甚至不是一个正方形，只是一个普通的虚无。

这是使用的代码。它应该在hr 的中间显示一个图标：

html头：

<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">

html 正文：

<hr class="star-light">

css:

hr.star-light:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-size: 2em;
    font-style: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

我也尝试放置冲突检测脚本，它实际上找到了一个......但这没有意义，因为只有一个冲突：fa的css本身all.min.css......我什至不确定它与问题有关......我被困在那里已经 2 小时了，我的搜索没有给我任何相关的信息。有人知道发生了什么吗？或者我可以尝试什么？

这是整个存储库，以防您想尝试。这是一个雨果主题。我的仓库已经包含了 fontawesome 5： https://github.com/maxlefou/hugo-freelancer-theme

编辑：我刚刚发现了问题。这很愚蠢：问题只发生在 chrome 和 chromium 浏览器上。一切都在 Firefox 上运行。去数字...

感谢您的帮助。

Answer 1

尝试更改字体系列：“Font Awesome 5 Free”； to font-family: "FontAwesome";

这将解决问题。