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

Bootstrap 4 の Navbar ボタン アイコンの色をカスタマイズする方法

Bootstrap 4 は、navbar-toggler-icon に独自の SVG 背景画像を採用しています。 （ハンバーガー）。このアイコンには、明るい背景のナビゲーションバー用と暗い背景のナビゲーションバー用の 2 つのバリエーションがあります。

アイコンの色のカスタマイズ

デフォルトの黒または白の場合デザインに合わない場合は、アイコンの色をカスタマイズできます。たとえば、ピンクに変更するには、以下に示すように 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");
}

または、サードパーティのアイコン ライブラリを使用します

デフォルトのアイコンを、Font Awesome などのサードパーティ ライブラリのアイコンに置き換えることもできます。このアプローチにより、アイコンの外観の柔軟性と制御が向上します。

Bootstrap 4.0.0 の変更点

Bootstrap 4 ベータでは、navbar-inverse クラスが次のように置き換えられました。ナビゲーションバー - ダーク。このクラスは、暗い背景のナビゲーションバーで使用することを目的としており、明るいリンクとトグラーの色を生成します。

追加リソース

• [ブートストラップ 4 ナビゲーションバーの変更]色](https://getbootstrap.com/docs/4.0/components/navbar/#how-to-change-navbars-colors)

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