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

Question

所以，我已经阅读并尝试了google的前5个页面上几乎所有的堆栈溢出答案，并且认真的我整天都在努力，无法弄清楚实际发生了什么。

所以，这是我的导航栏显示的屏幕截图。如您所见，右边的正方形实际上应该是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