【Bootstrap】Navbarのハンバーガーメニューアイコンを変更

  • このエントリーをはてなブックマークに追加

Bootstrapのnavbarで作成したレスポンシブなハンバーガーメニューのアイコンは、デフォルトで「bars」です。ナビゲーションバーのカスタマイズとして、アイコンをfontawsomeのアイコンに変更する方法を説明します。

  1. Bootstrapでレスポンシブなハンバーガーメニュー作成
  2. Fontawsomeでアイコン選択
  3. アイコン変更

 1. Bootstrapでレスポンシブなハンバーガーメニュー作成

Bootsrapのnavbarを利用すると、簡単にレスポンシブなハンバーガーメニューを作成することができます。作成方法は下記の記事でサンプルコードを提示しながら詳しく説明しています。

作成したナビゲーションバーは以下のようになります。画面幅が768pxより狭い場合にハンバーガーメニューが表示されます。

 2. Fontawsomeでアイコン選択

デフォルトで設定されるハンバーガーメニューアイコンは、メニューの開閉にかかわらずfontawsomeの「bars」です。開発者ツールで、「navbar-toggle-icon」を確認すると、background-image: url(svgファイル)でアイコンが指定されていることが確認できます。

今回は、Fontawsomeの無料で使用できるアイコンの中から「hamburger」アイコンを使用します。

 3. アイコン変更

●View

ハンバーガーメニューアイコンの変更が完了しました。アイコンのサイズや色はCssで変更可能です。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*