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

Bootstrap 4 の Navbar ボタン アイコンの色の変更

Bootstrap 4 には、小さい画面サイズ用のハンバーガー メニュー アイコンが備わっています。これは次のとおりです。コード:

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

このアイコンは白または白で表示されます暗い背景、または明るい背景の上に暗い色。ただし、デザインのビジョンに合わせて色を調整することもできます。

アイコンのカスタマイズ

アイコンの色をカスタマイズするために、Bootstrap 4 は SVG 背景画像を使用します。 。ナビゲーションバーの背景色に基づいて、異なる SVG が使用されます。

• .navbar-light .navbar-toggler-icon: 明るい背景用に 50% の不透明度を持つ黒いアイコン
• .navbar-dark .navbar-toggler-icon: 暗い部分の不透明度が 50% の白いアイコン背景

たとえば、アイコンの色をピンクに変更するには、次の 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");
}

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

代替アプローチ

Anアイコンをカスタマイズする代わりに、Font Awesome などの別のアイコン ライブラリを使用することもできます。これにより、アイコンの外観をより柔軟に制御できるようになります。

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