Font-Awesome 使用 CSS Pseudo After 显示正方形而不是图标答案

【问题标题】：Font-Awesome displaying square instead of icon using CSS Pseudo AfterFont-Awesome 使用 CSS Pseudo After 显示正方形而不是图标
【发布时间】：2020-02-19 05:50:38
【问题描述】：

所以，我已经阅读并尝试了谷歌前 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 应用程序。所以这段代码被符号链接到我的实际网站中。并不是说它应该有任何区别。

那么，我在这里错过了什么？