[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか？

質問

Bootstrapのサイトで、画面サイズが992px以下の場合にハンバーガートグラーを追加しています。コードは以下のようなものです。

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

ハンバーガートグラーボタンの色を変更することは可能でしょうか？

解決方法は？

その navbar-toggler-icon (ハンバーガー) は、Bootstrap 4 では SVG の background-image . トグラーアイコン画像には2つのバージョン"versionがあります。1つはライトナンバー用、もう1つはダークナンバー用です。

• 使用方法 navbar-dark 濃い色の背景で白黒のトグラーを使用する場合
• 使用方法 navbar-light 明るい背景で暗い/グレーのトグラーを使用する場合

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

したがって、トグラー画像の色を他のものに変えたい場合は、アイコンをカスタマイズすればよいのです。例えば、ここではRGBの値をピンク（255,102,203）に設定しています。に注目してください。 stroke='rgba(255,102,203, 0.5)' の値を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);
} 

デモ http://www.codeply.com/go/4FdZGlPMNV

OFCでは、他のライブラリ（Font Awesomeなど）のアイコンを使用する方法もあります。

Bootstrap 4.0.0をアップデートしました。

Bootstrap 4 Betaの時点。 navbar-inverse は、現在 navbar-dark 背景色が暗いナビバーで、リンクとトグラーの色を明るくするために使用します。

Bootstrap 4のナバーカラーを変更する方法