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

Question

所以，我已经阅读并尝试了 google 前 5 页上的几乎所有 Stack Overflow 答案，但我无法弄清楚到底发生了什么。

所以，这是我的导航栏显示内容的屏幕截图。如您所见，右侧的正方形实际上应该是 this icon here. When the blog link is clicked it is supposed to change to this icon here。有关示例，请参见下面的屏幕截图。

有关我正在努力完成的工作示例，您可以访问 this link here, which is directly off of StartBootstrap.com, which is a live demo template. Except where the demo site says "Pages" instead of "Blog" like my website. You can find the full 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 应用程序。所以这段代码被symlink编辑到我的实际网站中。并不是说它应该有任何区别。

那么，我在这里缺少什么？

编辑 1

参考link我试过：

FontAwesome icons not showing. Why?

Font Awesome not working, icons showing as squares

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”页面直接下载等
尝试将伪从之后更改为之前。

因此，尽管这是 "duplicate question"，但所有相同问题或问题类型的答案中 none 都适用于我的具体案例。

我也在为我的 full package repo as it sits right now, and the Laravel web application repo 添加一个 link。

编辑 3

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

Answer 1

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

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Answer 2

您是否尝试为特定元素指定字体粗细：粗体；？

有时 font-weight bold 会修复它。

Answer 3

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

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

Answer 4

类别和表格已使用 fa fa-list-alt 和 fa fa-fw fa-table 固定。

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

Font-Awesome displaying square instead of icon using CSS Pseudo After

css

twitter-bootstrap

font-awesome

webfonts

编辑 1

编辑 2

编辑 3