bootstrapのGlyphiconsの使い方

bootstrapのGlyphiconsをたまに使う時があるのですが、頻度が低すぎて使い方をいつも忘れてしまっていたので、メモとして残しておきます。

まず、Glyphiconsを使うためのフォントの設定（bootstrapのcssを使っている場合、設定は不要です）。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
      url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
      url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
      url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
      url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-time:before{
  content:"\e023";
}

「font-face」で指定しているURLはデフォルトではローカルのファイルを参照していますが、上記はCDNからの参照にしています。bootstrapを使わずにGlyphiconsだけ使いたいといった場合、上記のCSSを埋め込むだけで使用可能になります。

「glyphicon-time」のようにサイトで利用するGlyphiconを追記していきます。

HTMLのタグとして埋め込む場合は以下の通り。

<i class="glyphicon glyphicon-time"></i>

直接、HTMLに文字として埋め込む場合、「&（アンパサンド）」を「&amp;」と記述するように、対応した文字をコードで記述することができます。

&#xe023;



CSSを利用して埋め込む場合、「content」にコードを設定します。

.sample-glyphicon-time:before{
  content:"\e023";
}

対応する文字コードは以下の参考リンクから確認してください。

• Components · Bootstrap
• Bootstrap Glyphicons v3.3.7 | Bootstrap Cheat Sheets