【Twitter Bootstrap】アイコン付きナビリスト

今回は、アイコン付きナビリストです。前回のナビリストにちょこっと付け足すだけでアイコン付きのメニューになります。

  

<ul class="nav nav-list">
  <li class="active">
  <a href="#">Home</a>
  </li>
  <li><i class="icon-book"></i><a href="#tab1" data-toggle="tab">MENU1</a></li>
  <li><i class="icon-stop"></i><a href="#tab2" data-toggle="tab">MENU2</a></li>
  <li><i class="icon-tags"></i><a href="#tab2" data-toggle="tab">MENU3</a></li>
  <li><i class="icon-heart"></i><a href="#tab2" data-toggle="tab">MENU4</a></li>
  <li><i class="icon-align-center"></i><a href="#tab2" data-toggle="tab">MENU5</a></li>
  <li><i class="icon-cog"></i><a href="#tab2" data-toggle="tab">MENU6</a></li>
</ul>

ポイント

• <i>タグでアイコンを挿入
• アイコンの種類はクラスで指定
• どんなアイコンがあるかは、Twitter Bootstrapをダウンロードすると含まれているドキュメントからBaseCSSの最下部で確認

以上です。表示は以下のようになります。

メニューの左にアイコンが出ているのがわかりますね。 <i>タグだけで表示できます。

※ダウンロードしたTwitter Bootstrap内にアイコン画像が含まれています。フォルダツリーを変えると表示されませんので、注意です。

以上でアイコン付きナビリストはおしまい。次回は、タブメニューの変形版についてやります。

タグ：ナビリスト Twitter Bootstrap アイコン