How Can I Change the Bootstrap 4 Navbar Toggler Icon Color?

Modifying the Bootstrap 4 Navbar Button Icon Color

Bootstrap 4's navbar toggler icon, represented by the hamburger icon, utilizes an SVG background-image. Two variations of the icon image exist: one for light backgrounds and another for dark backgrounds.

To specify the toggler's color, you can utilize the following classes:

• navbar-dark: Displays a light/white toggler on darker backgrounds.
• navbar-light: Displays a dark/gray toggler on lighter backgrounds.

However, if you desire to further customize the toggler's color, you can create a custom icon. For example, the code snippet below sets the toggler color to pink (255, 102, 203) using the stroke='rgba(255,102,203, 0.5)' value in the SVG data:

.custom-toggler .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,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

For a live demonstration, refer to http://www.codeply.com/go/4FdZGlPMNV.

Alternatively, you could also use icons from external libraries such as Font Awesome.

Starting with Bootstrap 4 Beta, the navbar-inverse class has been replaced with navbar-dark for navbars with darker backgrounds, resulting in lighter link and toggler colors.

The above is the detailed content of How Can I Change the Bootstrap 4 Navbar Toggler Icon Color?. For more information, please follow other related articles on the PHP Chinese website!