Bootstrap 4 Navbar Toggler アイコンの色を変更するにはどうすればよいですか?

Bootstrap 4 のナビゲーションバー ボタン アイコンの色の変更

ハンバーガー アイコンで表される Bootstrap 4 のナビゲーションバー トグラー アイコンは、SVG 背景画像を使用しています。 。アイコン画像には 2 つのバリエーションが存在します。1 つは明るい背景用、もう 1 つは暗い背景用です。

トグラーの色を指定するには、次のクラスを利用できます:

• navbar -dark: 暗い部分に明るい/白の切り替えを表示します。
• navbar-light: 明るい背景に暗い/灰色のトグラーを表示します。

ただし、トグラーの色をさらにカスタマイズしたい場合は、カスタムアイコンを作成できます。たとえば、以下のコード スニペットは、SVG データの ストローク='rgba(255,102,203, 0.5)' 値を使用してトグラーの色をピンク (255, 102, 203) に設定します:

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

代わりに、Font Awesome などの外部ライブラリのアイコンを使用することもできます。

Bootstrap 4 ベータ版からは、navbar-inverse クラスは次のように置き換えられました。 navbar-dark は、背景が暗いナビゲーションバーの場合、リンクとトグラーの色が明るくなります。

以上がBootstrap 4 Navbar Toggler アイコンの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。