Im trying to use font awesome icon on my page beside the navbar brand. But for some reason its not loading. Need Help
<script src="https://use.fontawesome.com/e017101791.js"></script>
This is the script tag that font awesome mailed me and the one i'm using in my code
In the font awesome website the html for book-reader icon is
<i class="fas fa-book-reader"></i>
But in my code if i use 'fas' with 's' its not working so i had to write the class name as 'fa fa-book-reader'
In the footer I'm using facebook, twitter, instagram icon they are all loading perfectly after writing their class names as 'fa fa-facebook' instead of '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>
My Webpage Pic
Expected Webpage Output
