Comment puis-je modifier la couleur de l'icône du bouton de la barre de navigation Bootstrap 4 ?

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

Bootstrap 4 utilise une image d'arrière-plan SVG unique pour son icône de bascule de barre de navigation (hamburger). Cette icône est disponible en deux variantes : une pour les barres de navigation à fond clair et une autre pour les barres de navigation à fond sombre.

Personnalisation de la couleur de l'icône

Si la couleur noire ou blanche par défaut ne convient pas à votre design, vous pouvez personnaliser la couleur de l'icône. Par exemple, pour le changer en rose, ajustez la valeur du trait dans les données SVG, comme indiqué ci-dessous :

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

Vous pouvez également utiliser une bibliothèque d'icônes tierce

Vous pouvez également remplacer l'icône par défaut par une icône provenant d'une bibliothèque tierce, telle que Font Awesome. Cette approche offre plus de flexibilité et de contrôle sur l'apparence de l'icône.

Modifications dans Bootstrap 4.0.0

Dans Bootstrap 4 Beta, la classe navbar-inverse a été remplacée par barre de navigation-sombre. Cette classe est destinée à être utilisée avec des barres de navigation à fond plus sombre et produit des couleurs de liens et de bascule plus claires.

Ressources supplémentaires

• [Modification de la barre de navigation Bootstrap 4 Couleurs](https://getbootstrap.com/docs/4.0/components/navbar/#how-to-change-navbars-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!