字体很棒的字体

Question

我最近使用npm在网站上安装了font-awesome。当我在HTML文件中使用它时，它在页面上显示的是方块而不是图标。有人能帮我一下吗？

我在代码中使用了一些有趣的图标：

<li class="nav-item active"><a class="nav-link" href="index.html"><span class="fas fa-home"></span> Home</a></li>

我也包含了CSS。

Answer 1

黑色方块通常表示字体类型有错误。但我不能肯定这一点。试试san serif，否则你可以在这篇文章中找到答案：Font awesome is not showing icon

最好的答案是：

在我的例子中，我在css代码中犯了以下错误。

*{
    font-family: 'Open Sans', sans-serif !important;
}

这将覆盖整个页面的所有字体系列规则。我的解决方案是像这样把代码移到正文中。

body{
    font-family: 'Open Sans', sans-serif;
}

注意:每当您在css中使用!important标志时，在同一元素上声明的相同类型的任何其他css规则都将被覆盖。

答案出自: Daniel Barde

--

它还取决于您如何导入库，是通过CDN还是通过文件夹？

通过CDN:检查路径/ url是否正确(可能是未经授权的链接？)。

通过文件夹/下载:可能是use"/fonts/fontawesome-free-5.3.1-web/css/all.css“而不是"/fonts/fontawesome-free-5.3.1-web/css/fontawesome.css".