Bootstrap 4 Change Hamburger Toggler Couleur

j'ai un site bootstrap où le Hamburger est ajouté lorsque l'écran est inférieure à 992px. Le code HamBurger est comme ça!--3--> 

<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>

Est-il possible de changer la couleur du HamBurger bouton?

39
demandé sur Zim 2017-03-03 22:14:19

4 réponses

background-image. Il y a 2 "versions" de l'image de l'icône toggler. Un pour une barre de navigation légère, et un pour une barre de navigation sombre...

  • Utiliser navbar-dark pour une lumière blanc/activation / désactivation sur l'arrière-plan plus sombre
  • Utiliser navbar-light pour un noir/gris toggler sur plus d'arrière-plans
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

par conséquent, si vous voulez changer la couleur de l'image toggler en quelque chose d'autre, vous pouvez personnaliser icône. Par exemple, ici je mets la valeur RGB à pink (255,102,203). Avis de la stroke='rgba(255,102,203, 0.5)' valeur dans les données SVG:

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

Démohttp://www.codeply.com/go/4FdZGlPMNV

OFC, une autre option pour juste utiliser une icône d'une autre bibliothèque ie: Font Awesome, etc..

Mise À Jour De Bootstrap 4.0.0:

Comme de Bootstrap 4 Bêta, navbar-inverse est navbar-dark à utiliser sur les navbar avec des couleurs plus foncées couleurs de fond pour produire des liens plus clairs et des couleurs à bascule.

Comment changer Bootstrap 4 barre de navigation de couleurs

92
répondu Zim 2018-10-03 12:23:22

il suffit d'utiliser une police-awesome dans la balise " i " dans l'intervalle d'icône par défaut, puis changer la couleur de l'icône ajoutée avec CSS.

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>

.fa.fa-navicon {
  color:white;
}
15
répondu Amirreza Mohammadi 2018-04-03 21:04:57

si vous travaillez avec la version sass de bootstrap dans _variables.scss vous pouvez trouver $navbar-inverse-toggler-bg ou $navbar-light-toggler-bg où vous pouvez changer la couleur et le style de votre bouton à bascule.

En html, vous devez utiliser navbar-inverse ou navbar-light selon la version que vous souhaitez utiliser.

1
répondu nedeco 2017-08-23 14:24:56

comme alternative vous pouvez toujours essayer une solution de contournement plus simple, en utilisant une autre icône, par exemple:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

ref: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

ref: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

donc vous gagnez le contrôle total sur leur couleur et taille:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

enter image description here

( le style du bouton appliqué est juste pour un test rapide):

0
répondu Igor Parra 2018-03-14 02:20:46