How do I change the bootstrap hamburger icon for the nav bar in bootstrap 4?

Question

I'm having trouble changing the icon in the Navbar for bootstrap 4. My current html is as follows:

<nav class="navbar fixed-top navbar-expand-md navbar-custom">
  <a class="navbar-brand" href="#">
    <img src="images/logo.svg" width="60px" style="margin-right: 10px;" alt="logo">
    <span class="logo-text logo-text-small">Brand</span>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Features<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

and CSS:

.navbar-light .navbar-toggler-icon {
   background-image: url("images/hamburger-icon.svg");
}

.navbar-inverse .navbar-toggler-icon {
    background-image: url("images/hamburger-icon.svg");
}

.custom-toggler .navbar-toggler-icon {
   background-image: url("images/hamburger-icon.svg");
 }

The image is in images/hamburger-icon.svg , what am I doing wrong here?

Answer 1

Dear please use this css it will work:


 .navbar-light .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;
    }

    .navbar-inverse .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;

    }

    .custom-toggler .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;
     }