字体真棒书阅读器图标未加载答案

【问题标题】：Font awesome book reader icon not loading字体真棒书阅读器图标未加载
【发布时间】：2020-12-11 15:29:18
【问题描述】：

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

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

这是 font awesome 邮寄给我的脚本标签，也是我在代码中使用的标签

在字体真棒网站中，书籍阅读器图标的 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>

我的网页图片

预期的网页输出

【问题讨论】：

标签： html fonts icons font-awesome

【解决方案1】：

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

使用这个cdn类型，你会很高兴的。

【讨论】：

【解决方案2】：

将其包含在页面的头部：

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

【讨论】：