Bootstrap 4 Ändern Sie die Farbe des Hamburger Togglers

verwenden Sie einfach ein font-awesome im "i" -Tag im Standardsymbolbereich und ändern Sie dann die Farbe des hinzugefügten Symbols mit CSS.

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

.fa.fa-navicon {
  color:white;
}

Wenn Sie mit der sass-Version von bootstrap in_variables.scssarbeiten, können Sie$navbar-inverse-toggler-bgoder$navbar-light-toggler-bgfinden, wo Sie die Farbe und den Stil Ihrer Umschaltfläche ändern können.

In HTML müssen Sienavbar-inverseodernavbar-lightverwenden, je nachdem welche Version Sie verwenden möchten.

EDIT: mein schlechtes! Bei meiner Antwort verhält sich das Symbol nicht wie ein Toggler Eigentlich wird es auch angezeigt, wenn es nicht kollabiert ist ... Wird noch gesucht ...

Das würde funktionieren:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

Der von meiner Antwort vorgeschlagene Trick besteht darin, navbar-toggler durch eine klassische Tastenklasse btn zu ersetzen und dann, wie bereits erwähnt, eine Symbolschriftart zu verwenden.

Beachten Sie, dass die Schaltfläche eine "seltsame" Form hat, wenn Sie <button class="navbar-toggler"> beibehalten.

Wie in diesem Post auf github angegeben, verwendet bootstrap einige "css-Tricks", sodass Benutzer sich nicht auf Schriftarten verlassen müssen.

Verwenden Sie also nicht die Klasse "navbar-toggler" für Ihre Schaltfläche, wenn Sie eine Symbolschriftart verwenden möchten.

Prost.

Als Alternative können Sie immer eine einfachere Problemumgehung versuchen, z. B. mit einem anderen Symbol: 

<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

So haben Sie die vollständige Kontrolle über Farbe und Größe:

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

(Die angewendete Schaltfläche ist nur für einen schnellen Test):

Sie können die Toggle-Schaltfläche mit css nur auf sehr einfache Weise erstellen. In SVG oder ... foramt müssen Sie keine Schriftarten verwenden.

Dein Knopf:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Ihr Knopfstil:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Ihre horizontale Linie Stil:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Demo

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

fügen Sie einfach die Klasse navbar-dark oder navbar-light in das nav-Element ein:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Überprüfen Sie die beste Lösung für benutzerdefinierte Hamburgernavigation.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

Demo Image