字体真棒书阅读器图标无法加载

问题描述

我正在尝试在导航栏品牌旁边的页面上使用真棒字体图标。但是由于某种原因它没有加载。需要帮助

<script src="https://use.fontawesome.com/e017101791.js"></script>

这是字体真棒寄给我的脚本标签，也是我在代码中使用的脚本标签

在字体超赞的网站中，用于读书者图标的html是

<i class="fas fa-book-reader"></i>

但是在我的代码中，如果我将'fas'与's'一起使用不起作用，那么我不得不将类名写为'fa fa-book-reader'

在页脚中，我使用的是facebook，twitter，instagram图标，在将类名写为“ fa fa-facebook”而不是“ fab fa-facebook”之后，它们都可以完美加载。

.HTML

<nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <i class="fa fa-book-reader fa-3x mx-3"></i>
            Books</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="mr-auto"></div>
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Course</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Price</a>
              </li>
              <li class="nav-item dropdown">
                <div class="dropdown">
                  <a href="#" class="nav-link">Pages</a>
                  <div class="dropdown-content">
                    <a href="#" class="">Generic</a>
                    <a href="#">Element</a>
                  </div>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Fact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
            </ul>
          </div>
        </nav>

我的网页图片

预期的网页输出量

解决方法

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

使用此CDN类型，您会很方便。

,

将其添加到页面的顶部：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">