Aug 17 2013

Twitter Bootstrap 3 でアイコンを使う方法

By gyoza manner On 2013/08/17 In Bootstrap

Version : Twitter Bootstrap 3.0.0

Twitter Bootstrap 3 がまもなく正式リリースされそうですが、Bootstrap 3 からはアイコンの使い方が変わったようで 2 でできていたアイコンの表示方法が使えなくなっているようです。とはいえ、アイコンが使えなくなったわけではないようです。
ドキュメントを読みながら Bootstrap 3 でのアイコン表示を試したところうまくいったのでまとめておきます。

Pocket

[`evernote` not found]

Bootstrap 2 の場合

ドットインストールさんのレッスンなどで紹介されているように、これまでの Bootstrap 2 でアイコンを表示するには

<i class="icon-home"></i>

1	<i class="icon-home"></i>

とすればアイコンが表示されました。”home”の部分を変更することで140種類のアイコンが利用できます。

アイコンはボタンなどでも利用でき、

<button class="btn"><i class="icon-home"></i> Home</button>

1	<button class="btn"><i class="icon-home"></i> Home</button>

とすればという感じでアイコン付きボタンを表示することができます。

Bootstrap 3 ではこの書き方ではアイコンが表示されなくなったようです。現在 Bootstrap 3 は RC2 というバージョンですが、RC = Release Candidate（リリース候補）なのできっと正式版でもこの仕様は変わらないんじゃないでしょうか。

Bootstrap 3 でアイコンを使う

すでに Bootstrap 3　をダウンロードしてある前提で進めます。
Bootstrap 3 をダウンロードすると下図のようにいろいろなファイルが入っていますが、使うときに必要なのは dist フォルダの中の css と js フォルダだけです。

アイコンリソースの準備

ドキュメントに書いてある部分を引用すると、

Glyphicons
With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

となっており、Bootstrap 3 からアイコンは切り離されたようです。Glyphicons のサイトから Bootstrap 3 用のアイコン集をダウンロードしてくれとありますので、まずは Glyphicon のサイトに行きます。

タイトル下の真ん中あたりにある “Download from GitHub” ボタンをクリックしてダウンロードしましょう。
ダウンロードした zip を解凍するとたくさんファイルが出てきますが、必要な物は fonts フォルダと css フォルダの bootstrap-glyphicons.css だけです。
テストするために下図のように Bootstrap 3 と Glyphicons を一つにまとめました。下線部が Glyphicons から持ってきたファイルです。

これで準備は整いました。

HTML の書き方

テスト用に index.html を書いてみました。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Test Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap3/css/bootstrap-glyphicons.css" rel="stylesheet">
  </head>
  <body style="padding-top:40px">
    <div class="container">
      <h1>Icon Test</h1>

      アイコン表示： <i class="glyphicon glyphicon-home"></i><br>
      アイコン付きボタン： <button class="btn"><i class="glyphicon glyphicon-home"></i> Home</button>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="http://code.jquery.com/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="bootstrap3/js/bootstrap.min.js"></script>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Test Template</title>

</head>

アイコン表示： <i class="glyphicon glyphicon-home"></i><br>

アイコン付きボタン： <button class="btn"><i class="glyphicon glyphicon-home"></i> Home</button>

</div>

</body>

</html>

8行目 : glyphicon の css を読み込んでいます。
14行目 : class=”glyphicon glyphicon-home” として家の形のアイコンを表示します。
15行目 : 同様にボタンの中にアイコンを表示しています。

実行結果は下図のとおり。

glyphicon-home の home の部分を変えることで160種類のアイコンを表示することができます。

Bootstrap 3 のアイコン一覧

glyphicon-home 以外にも Bootstrap 3 対応の glyphicon で使える 160種類のアイコンを列挙してみました。

アイコン	名前
	glyphicon-glass
	glyphicon-music
	glyphicon-search
	glyphicon-envelope
	glyphicon-heart
	glyphicon-star
	glyphicon-star-empty
	glyphicon-user
	glyphicon-film
	glyphicon-th-large
	glyphicon-th
	glyphicon-th-list
	glyphicon-ok
	glyphicon-remove
	glyphicon-zoom-in
	glyphicon-zoom-out
	glyphicon-off
	glyphicon-signal
	glyphicon-cog
	glyphicon-trash
	glyphicon-home
	glyphicon-file
	glyphicon-time
	glyphicon-road
	glyphicon-download-alt
	glyphicon-download
	glyphicon-upload
	glyphicon-inbox
	glyphicon-play-circle
	glyphicon-repeat
	glyphicon-refresh
	glyphicon-list-alt
	glyphicon-lock
	glyphicon-flag
	glyphicon-headphones
	glyphicon-volume-off
	glyphicon-volume-down
	glyphicon-volume-up
	glyphicon-qrcode
	glyphicon-barcode
	glyphicon-tag
	glyphicon-tags
	glyphicon-book
	glyphicon-bookmark
	glyphicon-print
	glyphicon-camera
	glyphicon-font
	glyphicon-bold
	glyphicon-italic
	glyphicon-text-height
	glyphicon-text-width
	glyphicon-align-left
	glyphicon-align-center
	glyphicon-align-right
	glyphicon-align-justify
	glyphicon-list
	glyphicon-indent-left
	glyphicon-indent-right
	glyphicon-facetime-video
	glyphicon-picture
	glyphicon-pencil
	glyphicon-map-marker
	glyphicon-adjust
	glyphicon-tint
	glyphicon-edit
	glyphicon-share
	glyphicon-check
	glyphicon-move
	glyphicon-step-backward
	glyphicon-fast-backward
	glyphicon-backward
	glyphicon-play
	glyphicon-pause
	glyphicon-stop
	glyphicon-forward
	glyphicon-fast-forward
	glyphicon-step-forward
	glyphicon-eject
	glyphicon-chevron-left
	glyphicon-chevron-right
	glyphicon-plus-sign
	glyphicon-minus-sign
	glyphicon-remove-sign
	glyphicon-ok-sign
	glyphicon-question-sign
	glyphicon-info-sign
	glyphicon-screenshot
	glyphicon-remove-circle
	glyphicon-ok-circle
	glyphicon-ban-circle
	glyphicon-arrow-left
	glyphicon-arrow-right
	glyphicon-arrow-up
	glyphicon-arrow-down
	glyphicon-share-alt
	glyphicon-resize-full
	glyphicon-resize-small
	glyphicon-plus
	glyphicon-minus
	glyphicon-asterisk
	glyphicon-exclamation-sign
	glyphicon-gift
	glyphicon-leaf
	glyphicon-fire
	glyphicon-eye-open
	glyphicon-eye-close
	glyphicon-warning-sign
	glyphicon-plane
	glyphicon-calendar
	glyphicon-random
	glyphicon-comment
	glyphicon-magnet
	glyphicon-chevron-up
	glyphicon-chevron-down
	glyphicon-retweet
	glyphicon-shopping-cart
	glyphicon-folder-close
	glyphicon-folder-open
	glyphicon-resize-vertical
	glyphicon-resize-horizontal
	glyphicon-hdd
	glyphicon-bullhorn
	glyphicon-bell
	glyphicon-certificate
	glyphicon-thumbs-up
	glyphicon-thumbs-down
	glyphicon-hand-right
	glyphicon-hand-left
	glyphicon-hand-up
	glyphicon-hand-down
	glyphicon-circle-arrow-right
	glyphicon-circle-arrow-left
	glyphicon-circle-arrow-up
	glyphicon-circle-arrow-down
	glyphicon-globe
	glyphicon-wrench
	glyphicon-tasks
	glyphicon-filter
	glyphicon-briefcase
	glyphicon-fullscreen
	glyphicon-dashboard
	glyphicon-paperclip
	glyphicon-heart-empty
	glyphicon-link
	glyphicon-phone
	glyphicon-pushpin
	glyphicon-euro
	glyphicon-usd
	glyphicon-gbp
	glyphicon-sort
	glyphicon-sort-by-alphabet
	glyphicon-sort-by-alphabet-alt
	glyphicon-sort-by-order
	glyphicon-sort-by-order-alt
	glyphicon-sort-by-attributes
	glyphicon-sort-by-attributes-alt
	glyphicon-unchecked
	glyphicon-expand
	glyphicon-collapse
	glyphicon-collapse-top