Bootstrap 4 Navbar ハンバーガー メニュー アイコンの色をカスタマイズするにはどうすればよいですか?

Bootstrap 4 のナビゲーションバー ボタン アイコンの色のカスタマイズ

Bootstrap 4 では、画面サイズが 992 ピクセル未満の場合、ハンバーガー トグラー ボタンが表示されます。色をカスタマイズするには、navbar-toggler-icon クラスを利用できます。

Navbar Color Context:

ハンバーガー トグラー アイコンには 2 つの背景画像があります:

• Navbar-light: の白いアイコン明るい背景。
• Navbar-dark: 暗い背景の黒いアイコン。

アイコンの色の変更:

デフォルトの色を上書きするには、CSS を介してアイコンをカスタマイズできます。以下に例を示します。

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

この CSS は、アイコンの色をピンクに設定します。アイコンの色を決定する SVG データのストローク属性に注意してください。

追加のスタイル:

アイコンの境界線をアイコンの色と一致させるには、次のスタイル:

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

代替アプローチ:

代わりに、Font Awesome などの外部ライブラリのアイコンを使用し、個別にスタイルを設定することもできます。

Bootstrap 4.0.0 用に更新:

Bootstrap 4.0.0 では、navbar-inverse の名前が次のように変更されました。 navbar-dark は、暗い背景のナビゲーション バーで使用します。

追加のカスタマイズ オプション:

Bootstrap 4 のナビゲーション バーの色のカスタマイズの詳細については、公式ドキュメントを参照してください。 : https://getbootstrap.com/docs/4.0/components/navbar/#colors

以上がBootstrap 4 Navbar ハンバーガー メニュー アイコンの色をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。