The navbar-toggler-icon (hamburger) w Bootstrap 4 używa SVG background-image. Istnieją 2 "wersje" obrazu ikony togglera. Jeden na lekki pasku nawigacyjnym, a jeden dla ciemnej (odwrotny) paska nawigacyjnego ...
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
Więc jeśli chcesz zmienić kolor ten obraz do czegoś innego, można dostosować ikonę. Na przykład tutaj ustawiam wartość RGB na różową (255,102,203). Zwróć uwagę na wartość stroke='rgba(255,102,203, 0.5)' w danych SVG:
.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);
}
Demohttp://www.codeply.com/go/4FdZGlPMNV
OFC, innej opcji po prostu użyć ikony z innej biblioteki IE: Czcionka niesamowite, etc ..
Aktualizacja Bootstrap 4.0.0:
Jako Bootstrap 4 Beta, navbar-inverse jest teraz navbar-dark, aby używać go w przypadku navbarów z ciemniejszymi kolorami tła, aby uzyskać jaśniejsze kolory łącznika i przełącznika.
kod nie jest prowadzony jak w bootply –