Wie kann ich die Symbolfarbe der Bootstrap 4 Navbar-Schaltfläche ändern?

So passen Sie die Symbolfarbe der Navigationsleistenschaltfläche von Bootstrap 4 an

Bootstrap 4 verwendet ein einzigartiges SVG-Hintergrundbild für sein Navigationsleisten-Umschaltsymbol (Hamburger). Dieses Symbol gibt es in zwei Varianten: eine für Navigationsleisten mit hellem Hintergrund und eine für Navigationsleisten mit dunklem Hintergrund.

Anpassen der Symbolfarbe

Wenn die Standardfarbe Schwarz oder Weiß ist Wenn das Symbol nicht zu Ihrem Design passt, können Sie die Farbe des Symbols anpassen. Um es beispielsweise in Rosa zu ändern, passen Sie den Strichwert in den SVG-Daten an, wie unten gezeigt:

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

Alternativ können Sie eine Symbolbibliothek eines Drittanbieters verwenden

Sie können das Standardsymbol auch durch eines aus einer Bibliothek eines Drittanbieters ersetzen, z. B. Font Awesome. Dieser Ansatz bietet mehr Flexibilität und Kontrolle über das Erscheinungsbild des Symbols.

Änderungen in Bootstrap 4.0.0

In Bootstrap 4 Beta wurde die Klasse „navbar-inverse“ durch ersetzt Navbar-dunkel. Diese Klasse ist für die Verwendung mit Navigationsleisten mit dunklerem Hintergrund gedacht und erzeugt hellere Link- und Umschalterfarben.

Zusätzliche Ressourcen

• [Ändern der Bootstrap 4-Navigationsleiste Farben](https://getbootstrap.com/docs/4.0/components/navbar/#how-to-change-navbars-colors)

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