Enhance your navbar by incorporating a stunning font-awesome icon.

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

Alternatively, for older font-awesome versions:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

If you have bootstrap downloaded, navigate to

bootstrap-4.4.1-dist/css/bootstrap.min.css

1. Locate either the

   .navbar-light .navbar-toggler-icon

   or

   .navbar-dark .navbar-toggler-icon

   selector

2. Identify the background-image attribute and its corresponding value. The code snippet should resemble:

   .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }
   

3. Copy this code snippet and insert it into your personalized CSS file

4. Replace the current stroke='rgba(0, 0, 0, 0.5)' value with your desired rgba color value

The best way to enhance your navbar is by updating the default bootstrap code:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

Replace it with:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

Also, make sure to include this line in your file as well:

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

This simple update will surely enhance your navbar design. Give it a try!

You can easily create a toggler button using only CSS, without the need for any SVG or font formats.

Here is your Button:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Your Button Style:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;
 }

Your horizontal line Style:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}

Check out the Demo:

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

To change the appearance of the navigation bar, simply add the class navbar-dark or navbar-light to the nav element:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Sure thing! To change the default navbar-toggler icon to a font awesome bars icon, all you have to do is remove the span tag with the class "navbar-toggler-icon" and replace it with the font awesome icon code:

<i class="fas fa-bars"></i>

Next, if you want to hide this icon on desktops (width greater than 992px), you need to include a media query in your CSS like this:

 /* Hide icon on large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* Your custom icon class ↑ */
    .iconClass{
        display: none;
    }
    /* Default bootstrap toggler button class */
    .navbar-toggler{
        display: none;
    }
}

This method worked wonders for me too, and it's super simple to implement!

The default bootstrap navbar icon can be changed with the following code:

<span class="navbar-toggler-icon"></span>

To add Font Awesome Icon and remove the original navbar icon, use the code below:

<span>
       <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

If you're looking for a simple solution, consider utilizing Font Awesome as an example.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
       <span><i class="fas fa-bars"></i></span>
</button>

Afterwards, feel free to modify the i element just like any other ielement.

If you're looking for an alternative solution, consider using a different icon as a simpler workaround. For example:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

Reference: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

Reference: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

This approach gives you complete control over the color and size of the icons:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

https://i.sstatic.net/tPb4s.png

(The style applied to the button is just for testing purposes):

UPDATE: Apologies for the confusion in my previous response, the icon may not work as intended In fact, it might show even when not collapsed... I'm still exploring solutions...

Here is an alternative approach that could be effective :

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

The suggestion put forth suggests replacing the navbar-toggler with a traditional button class btn and then incorporating an icon font, as mentioned earlier.

It's worth noting that if you retain

<button class="navbar-toggler">

As discussed in this github post, bootstrap utilizes some "css trickery", so users can avoid depending on fonts.

Hence, refraining from using the "navbar-toggler" class on your button will allow you to integrate an icon font smoothly.

Cheers.

I recently discovered a much simpler solution. (Yes, I am aware that this is an old question, but someone looking into the same issue may find this helpful.)

Originally, I was using an SVG named hamburger.svg. Upon inspecting it with a text editor, I couldn't locate any code defining the color for the three lines - my assumption is that it defaults to black since that is the behavior I experienced. To resolve this, I added a "stroke" parameter to the SVG definition. Although this didn't completely solve the problem initially - the borders of the lines were white as intended, but the rest remained black - I also included a "fill" parameter and that did the trick!

Below is the complete code for the original hamburger.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2  
  s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

And here is the code for the revised SVG which I saved as hamburger_white.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.
  896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

You will notice by scrolling all the way to the right, I simply added:

stroke="white" fill="white"

at the very end of the path. Additionally, I had to update the file name of the hamburger in the HTML. No adjustments to the CSS were necessary, and there was no need to search for another icon.

That's all there is to it! You can follow this approach to customize your hamburger icon with any color you prefer.

Find the top solution for creating a custom hamburger navigation menu.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

view demo image

Consider modifying your SCSS code with the following:

$navbar-dark-color: #abcdef; /* <-- this is where you adjust the color */

If you are utilizing the sass version of bootstrap and looking to customize your toggle button, simply open the _variables.scss file to locate variables such as $navbar-inverse-toggler-bg or $navbar-light-toggler-bg for changing colors and styles.

In your HTML code, make sure to use either navbar-inverse or navbar-light based on the version you want to implement.

Feel free to apply the following CSS filter effects: filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

For the latest version of Bootstrap (v5.3.2) in November 2023, you will need to include the class "bg-dark" and data-bs-theme="dark" on the nav element like so:

<nav class="navbar bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">[Your brand]</a>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

Check out the Bootstrap Documentation for Navbar color schemes!