字体使用CSS伪后显示方形而不是图标

所以，我已经阅读并尝试了谷歌前5页上几乎所有的堆栈溢出答案，但我不知道到底发生了什么

这是我的导航栏显示的屏幕截图。正如你所看到的，右边的正方形应该是。当点击博客链接时，应该将其更改为。有关示例，请参见下面的屏幕截图

关于我试图完成的工作示例，您可以访问StartBootstrap.com，它是一个实时演示模板。除了演示网站上说的是“页面”而不是像我的网站那样的“博客”。您可以找到模板的完整GitHub Repo

所以我复制了他们的代码，我通过CDN添加了Font Awesome，我使用他们新工具包的脚本标签添加了Font Awesome，我甚至下载了它，并将

/css/all.min.css

和

/webfonts

文件夹包含到我的网站中，但它仍然不起作用

这是我的密码：

侧栏.blade.php

{{--登录屏幕：-}
{{--  --}}

侧边栏的相关CSS

.navbar导航表单内联输入组{
宽度：100%；
}
.navbar导航。导航项。活动导航链接{
颜色：#fff；
}
.navbar nav.nav-item.dropdown.dropdown切换：：after{
宽度：1em；
文本对齐：居中；
浮动：对；
垂直对齐：0；
边界：0；
字号：900；
内容：'\f105'；
字体系列：'font Awesome 5 Solid'！重要；
}
.navbar nav.nav-item.dropdown.show.dropdown切换：：after{
内容：“\f107”；
}
.navbar nav.nav-item.dropdown.no-arrow.dropdown切换：：after{
显示：无；
}
.导航栏导航.导航项目.导航链接：焦点{
大纲：无；
}
.导航栏导航.导航项目.导航链接.徽章{
位置：绝对位置；
左边距：0.75雷姆；
顶部：0.3rem；
字体大小：400；
字体大小：0.5rem；
}

这个网站是在拉威尔设计的。然而，这实际上是一个Laravel软件包开发，而不是一个实际的Laravel Web应用程序。所以这个代码被符号链接到我的实际网站上。这不应该有任何区别

那么，我错过了什么

编辑1 我尝试过的参考链接：

编辑2 我认为这不是一个重复的问题，因为所有其他问题的答案都建议我做以下几点

将字体系列更改为“免费字体Awesome5”、“纯色字体Awesome5”等

将字体大小更改为900、粗体、400等

包括通过CDN下载字体，通过“”页面直接下载等

尝试将伪代码从“后”更改为“前”

因此，虽然这是一个“重复问题”，但所有相同问题或问题类型的答案都不适用于我的具体案例

我还添加了一个链接到我的，以及

编辑3 admin.css文件现在在GitHub repo中是正确的，相关代码从第10626行开始。

您需要使用“Font Awesome 5 Free”作为字体系列（如果您使用的是免费版本）

---

是否尝试为特定元素指定字体权重：粗体

对于fas，字体粗体有时会修复它

（代表问题作者发布，将其从问题移至答案部分）

---

问题已经解决了。整个问题都是由于使用了过时的Font Awesome版本。因此，对于遇到此问题的任何人，请确保您使用的是最新版本的Font Awesome

类别和表格是通过使用

fa-fa-list-alt

和

fa-fa-fw-fa-table

来固定的。调试代码很困难，但是您是否尝试过使用

font-family:“font-Awesome 5-Free”

？您真的尝试过共享的所有链接吗？其中一个包含解决方案：@ChrisHappy是的，我尝试过。@temaniaf如果是的，我尝试过该解决方案。您的实际代码显示无效的字体系列。是的，我尝试过使用它以及“font Awesome 5 Free”。是的，但粗体是相同的，而不是900。也许这会有所不同。