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

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>