字体-很棒的显示方块而不是图标使用CSS伪后

Question

所以，我已经阅读并尝试了google前5页上几乎所有的堆栈溢出答案，但我不知道到底是怎么回事。

所以，这是我的导航栏显示的截图。正如你所看到的，右边的正方形实际上应该是这里的图标。当博客链接被点击时，它应该在这里改变为这个图标。示例见下面的截图。

对于我试图实现的工作示例，您可以访问这里的链接，它直接来自startbootstrap.com，这是一个现场演示模板。除了演示网站说“页面”而不是“博客”像我的网站。您可以在这里找到该模板的完整的GitHub回购。

<!-- 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>

.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应用程序。因此，这个代码被符号链接到我的实际网站。并不是说应该有什么不同。

那么，我在这里漏掉了什么？

我尝试过的参考链接：

https://www.hanselman.com/blog/whydomyfontawesomeiconsshowupasblanksquares.aspx

我认为这不是一个重复的问题，因为所有其他问题的答案都建议我做以下一些我已经做过的事情。

1. 将font-family更改为“font Awesome 5 free”、“font Awesome 5 solid”等。
2. 将字体权重设置为900、粗体、400等
3. 包括通过CDN的字体真棒，通过“托管字体-真棒自己”页面直接下载等。
4. 尝试将伪从after更改为before。

Answer 1

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

问题已经解决了。这整个问题是由于使用了一个过时的版本的字体-真棒。因此，对于任何谁正在运行这个问题，请确保您使用的是最新版本的字体-真棒！