因此，我已经阅读并尝试了Google的前5页上几乎所有的Stack Overflow答案，但我不知道实际发生了什么。
因此，这是我的导航栏显示的屏幕截图。如您所见，右边的正方形实际上应该是this icon here。单击博客链接后，应该将其更改为this icon here。有关示例，请参见下面的屏幕截图。
有关我要完成的工作的有效示例，请访问this link here，它直接来自StartBootstrap.com，后者是一个实时演示模板。除了演示站点显示“页面”而不是“博客”之类的网站。您可以找到模板的完整GitHub Repo Here。
因此，我复制了他们的代码，通过CDN添加了Font Awesome，使用新的Kit的Script标签添加了它，甚至下载了它，并将/css/all.min.css和/webfonts文件夹包括到我的网站中，它仍然无法正常工作。
这是我的代码：
Sidebar.blade.php
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fab fa-blogger-b"></i>
<span>Blog</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
{{-- <h6 class="dropdown-header">Login Screens:</h6> --}}
<a class="dropdown-item" href="#"><i class="far fa-newspaper"></i> Posts</a>
<a class="dropdown-item" href=""><i class="far fa-list-alt"></i> Categories</a>
{{-- <div class="dropdown-divider"></div> --}}
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-chart-area"></i>
<span>Stuff</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
</ul>
侧边栏的相关CSS
.navbar-nav .form-inline .input-group {
width: 100%;
}
.navbar-nav .nav-item.active .nav-link {
color: #fff;
}
.navbar-nav .nav-item.dropdown .dropdown-toggle::after {
width: 1rem;
text-align: center;
float: right;
vertical-align: 0;
border: 0;
font-weight: 900;
content: '\f105';
font-family: 'Font Awesome 5 Solid' !important;
}
.navbar-nav .nav-item.dropdown.show .dropdown-toggle::after {
content: "\f107";
}
.navbar-nav .nav-item.dropdown.no-arrow .dropdown-toggle::after {
display: none;
}
.navbar-nav .nav-item .nav-link:focus {
outline: none;
}
.navbar-nav .nav-item .nav-link .badge {
position: absolute;
margin-left: 0.75rem;
top: 0.3rem;
font-weight: 400;
font-size: 0.5rem;
}
该网站是在Laravel设计的。但是，这实际上是Laravel软件包开发，而不是实际的Laravel Web应用程序。因此，此代码已链接到我的实际网站中。并不是说它应该有什么区别。
那么，我在这里想念什么？
编辑1
我尝试过的参考链接：
FontAwesome icons not showing. Why?
Font Awesome not working, icons showing as squares
Font Awesome in CSS pseudo elements not showing
Font Awesome 5 on pseudo elements shows square instead of icon
Font awesome is not showing icon
https://www.hanselman.com/blog/WhyDoMyFontAwesomeIconsShowUpAsBlankSquares.aspx
编辑2
我认为这不是一个重复的问题，因为所有其他问题的答案都建议做一些我已经完成的事情。
将字体系列更改为“ Font Awesome 5 Free”，“ Font Awesome 5 Solid”等。
将字体粗细设置为900，粗体，400等。
通过CDN包括Font Awesome，通过“ Hosting Font-Awesome Yourself”页面直接下载，等等。
尝试将伪伪从之后更改为之前。
因此，尽管这是一个“重复性问题”，但对于我的具体情况，所有相同问题或问题类型的答案都无效。
我还添加了指向full package repo as it sits right now和Laravel web application repo的链接。
编辑3
admin.css文件现在在GitHub存储库中是正确的，相关代码从10626行开始。
最佳答案
（代表问题作者发布，将其从问题移到答案部分）。
问题已解决。整个问题是由于使用了过时的Font-Awesome版本。因此，对于遇到此问题的任何人，请确保您使用的是Font-Awesome的最新版本！
关于css - Font-Awesome使用CSS Pseudo After显示正方形而不是图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58515104/