Wie kann ich die Farbe des Bootstrap 4 Navbar Toggler-Symbols ändern?

Ändern der Symbolfarbe der Bootstrap 4-Navigationsleisten-Schaltfläche

Das Navigationsleisten-Umschaltsymbol von Bootstrap 4, dargestellt durch das Hamburger-Symbol, verwendet ein SVG-Hintergrundbild . Es gibt zwei Variationen des Symbolbilds: eine für helle Hintergründe und eine andere für dunkle Hintergründe.

Um die Farbe des Umschalters festzulegen, können Sie die folgenden Klassen verwenden:

• navbar -dark: Zeigt einen hell/weißen Umschalter auf dunkler an Hintergründe.
• navbar-light: Zeigt einen dunklen/grauen Umschalter auf helleren Hintergründen an.

Wenn Sie jedoch die Farbe des Umschalters weiter anpassen möchten, können Sie dies tun kann ein benutzerdefiniertes Symbol erstellen. Das folgende Codefragment setzt beispielsweise die Umschalterfarbe auf Rosa (255, 102, 203), indem der Wert Stroke='rgba(255,102,203, 0.5)' in den SVG-Daten verwendet wird:

.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);
}

Eine Live-Demonstration finden Sie unter http://www.codeply.com/go/4FdZGlPMNV.

Alternativ können Sie auch Symbole aus externen Bibliotheken wie Font Awesome verwenden.

Ab Bootstrap 4 Beta wird das navbar-inverse wurde für Navigationsleisten durch navbar-dark ersetzt mit dunkleren Hintergründen, was zu helleren Link- und Toggle-Farben führt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Farbe des Bootstrap 4 Navbar Toggler-Symbols ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!