How do I change the default 'navbar-toggler' button icon in bootstrap? - html

Question

I've searched everywhere and have tried multiple things, but I just can't seem to get it to work with my code. I'm trying to change the default navbar-toggler hamburger button icon in bootstrap and use a custom Font Awesome icon. Here's my code:
HTML:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcustom">
<ul class="navbar-nav ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
span.navbar-toggler-icon::after {
color: white;
font: normal normal normal 14px/1 FontAwesome;
}

Answer 1

If you want to change it using just CSS, then this snippet could be the answer to your question-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a03fb08303.js"></script>
<style>
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.navbar-dark .navbar-toggler-icon::after {
content: "\f0c9";
font-family: "FontAwesome";
font-size: 22px;
color: #333;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom" aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-dark" id="navbarcustom">
<ul class="navbar-nav ml-auto">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
And if you want to change it using just HTML, then this one could be the answer, delete the span in the navbar-toggler button and replace it with font-awesome like this-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x text-dark"></span>
</button>
Here is a full example in this snippet, lemme know which one helped you or you needed something else.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a03fb08303.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
<div class="container">
<!-- Logo Deciding Where To Put It-->
<!--<a class="navbar-brand" href="images/KevinLogo01.png"></a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcustom"
aria-controls="navbarcustom" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x text-dark"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcustom">
<ul class="navbar-nav ml-auto bg-dark">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>