Comment personnaliser la couleur de l'icône du menu Hamburger de la barre de navigation Bootstrap 4 ?

Personnalisation de la couleur de l'icône du bouton de la barre de navigation Bootstrap 4

Dans Bootstrap 4, le bouton bascule hamburger apparaît lorsque la taille de l'écran est inférieure à 992 pixels. Pour personnaliser sa couleur, vous pouvez utiliser la classe navbar-toggler-icon.

Contexte de couleur de la barre de navigation :

L'icône de bascule du hamburger a deux images d'arrière-plan :

• Navbar-light : Icône blanche pour la lumière arrière-plans.
• Navbar-dark : Icône noire pour les arrière-plans sombres.

Changement de la couleur de l'icône :

Pour remplacer la couleur par défaut, vous pouvez personnaliser l'icône via CSS. Voici un exemple :

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

Ce CSS définit la couleur de l'icône sur rose. Notez l'attribut de trait dans les données SVG, qui détermine la couleur de l'icône.

Style supplémentaire :

Pour faire correspondre la bordure de l'icône avec la couleur de l'icône, vous pouvez ajouter le style suivant :

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

Alternative Approche :

Vous pouvez également utiliser des icônes provenant de bibliothèques externes, telles que Font Awesome, et les styliser indépendamment.

Mise à jour pour Bootstrap 4.0.0 :

Dans Bootstrap 4.0.0, navbar-inverse a été renommé en navbar-dark pour une utilisation sur barres de navigation avec fond sombre.

Options de personnalisation supplémentaires :

Pour des informations plus détaillées sur la personnalisation des couleurs de la barre de navigation Bootstrap 4, veuillez vous référer à la documentation officielle : https://getbootstrap .com/docs/4.0/components/navbar/#colors

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!