Bootstrap3で使用できるGlyphiconの使い方。
簡単なアイコンであれば、ほぼほぼアイコンフォントが使われるようになってきてますね。小さな画像を何枚も用意する必要がなくなるのですごく便利な存在です。
ここではBootstrap3で使えるGlyphiconの使い方を紹介します。他のアイコンフォントとも同じ使い方ができるのでまだ使っていない方はここでマスターしておきましょう!
Bootstrap3のGlyphiconの使い方
Glyphiconとは?
Glyphiconはアイコンフォントと呼ばれるもので、あらかじめ用意されたものの中からアイコンを選んで表示する機能。
Webサイトでアイコンを表示する際、普段はイラストレータやフォトショップを使って画像として切り出し、img
タグを使って表示しますが、Glyphiconのようなアイコンフォントでは画像として切り出す必要がなく、HTMLタグ(span)にclassをつけるだけでOK。
<span class="glyphicon glyphicon-search"></span>
使えるアイコンはBootstrap3のドキュメントに掲載されているのでそちらをチェックしてみてください。
Glyphiconの使い方
書き方はspan
タグにアイコンごとのclassをつけるだけです。以下のようにメニューのリストの中に入れたり、ボタンの中に入れたりすることもできます。
<!-- アイコンだけ -->
<span class="glyphicon glyphicon-search"></span>
<!-- メニューと一緒に使う -->
<ul class="list-inline">
<li>
<a href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> menu
</a>
</li>
</ul>
<!-- ボタンと一緒に使う -->
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
アイコンフォントの場所を変える方法
アイコンフォントは特に何も設定しなくても、Bootstrap3のcssが読み込まれていて、fontsフォルダが正しい場所にあれば表示されます。
├── css
| └── bootstrap.css
├── fonts
| └── フォントファイル
└── js
この構造になっていれば何も問題ないのですが、アイコンフォントのフォルダの位置が変わる場合は以下のような方法でパスを修正することができます。
- ソースlessファイルの
@icon-font-path
または@icon-font-name
変数を変更 - Lessコンパイラで使えるURLオプションを使用
- コンパイル済みCSSの
url()
パスを変更
この中で簡単なのはCSSのURLパスを変更する方法。263行目付近の@font-face
にあるパスを変更します。
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
/* 変更例 */
src: url('font-pack/glyphicons-halflings-regular.eot');
その他のアイコンフォント
アイコンフォントはGlyphiconの他にもFontAwesomeが有名です。使い方はほとんど同じなのでGlyphiconで使いたいアイコンがない場合はFontAwesomeもおすすめ。
最後までご覧いただきありがとうございました 🙂