Aug 17 2013

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

Version : Twitter Bootstrap 3.0.0
Bootstrap

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


Pocket

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

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

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

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

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

 

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

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

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 のサイトに行きます。

http://glyphicons.getbootstrap.com/

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

css

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

 

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

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

Bootstrap_Test_Template

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

 

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


Pocket

Comments
  1. 3年 ago
  2. 3年 ago

コメントを残す