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

Ändern der Symbolfarbe der Navigationsleistenschaltfläche von Bootstrap 4

Bootstrap 4 verfügt über ein Hamburger-Menüsymbol für kleinere Bildschirmgrößen, das im Folgenden zu sehen ist Code:

<button class="navbar-toggler navbar-toggler-right"
        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>

Dieses Symbol wird entweder weiß auf dunklem Hintergrund oder dunkel auf hellem Hintergrund angezeigt. Möglicherweise möchten Sie jedoch die Farbe an Ihre Designvorstellungen anpassen.

Anpassen des Symbols

Um die Farbe des Symbols anzupassen, verwendet Bootstrap 4 ein SVG-Hintergrundbild . Basierend auf der Hintergrundfarbe der Navigationsleiste werden unterschiedliche SVGs verwendet.

• .navbar-light .navbar-toggler-icon: Schwarzes Symbol mit 50 % Deckkraft für helle Hintergründe
• .navbar-dark .navbar-toggler-icon: Weißes Symbol mit 50 % Deckkraft für Dunkelheit Hintergründe

Um die Farbe des Symbols beispielsweise in Pink zu ändern, verwenden Sie das folgende CSS:

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

Alternative Ansätze

An Eine Alternative zum Anpassen des Symbols besteht darin, eine andere Symbolbibliothek zu verwenden, z. B. Font Awesome. Dies bietet mehr Flexibilität und Kontrolle über das Erscheinungsbild des Symbols.

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