Bootstrap3 Glyphiconの簡単な使い方

2017-01-24

Pocket

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');