☰

Bootstrap 4 のナビゲーションバーボタンアイコンの色を変更するにはどうすればよいですか? 質問する

tag-icon • tag-icon css twitter-bootstrap bootstrap-4
Bootstrap 4 のナビゲーションバーボタンアイコンの色を変更するにはどうすればよいですか? 質問する

画面サイズが 992 ピクセル未満の場合にハンバーガー トグルが追加される Bootstrap Web サイトがあります。コードは次のようになります。

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

ハンバーガートグルボタンの色を変更することはできますか?

ベストアンサー1

Bootstrap navbar-toggler-icon4 の (ハンバーガー) は SVG を使用しますbackground-image。トグル アイコン イメージには 2 つの「バージョン」があります。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) に設定しています。SVGstroke='rgba(255,102,203, 0.5)'データの値に注目してください。

.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.0.0 を更新します:

Bootstrap 4 ベータ版では、暗い背景色のナビゲーション バーで使用して、明るいリンクとトグル カラーを生成するようにnavbar-inverseなりました。navbar-dark

Bootstrap 4 のナビゲーションバーの色を変更する方法

おすすめ記事