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

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

Bootstrap 4 comporte une icône de menu hamburger pour les tailles d'écran plus petites, qui peut être vue dans ce qui suit 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>

Cette icône est affichée soit en blanc sur fond sombre, soit en sombre sur fond clair. Cependant, vous souhaiterez peut-être ajuster sa couleur en fonction de votre vision du design.

Personnalisation de l'icône

Pour personnaliser la couleur de l'icône, Bootstrap 4 utilise une image d'arrière-plan SVG . Différents SVG sont utilisés en fonction de la couleur d'arrière-plan de la barre de navigation.

• .navbar-light .navbar-toggler-icon : icône noire avec 50 % d'opacité pour les arrière-plans clairs
• .navbar-dark .navbar-toggler-icon : icône blanche avec une opacité de 50 % pour l'obscurité backgrounds

Pour changer la couleur de l'icône en rose, par exemple, utilisez le CSS suivant :

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

Approches alternatives

Une Une alternative à la personnalisation de l'icône consiste à utiliser une bibliothèque d'icônes différente, telle que Font Awesome. Cela offre plus de flexibilité et de contrôle sur l'apparence de l'icône.

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!