モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

Glyphicons などのアイコンフォントを CSS の before とかで表示させる

アイコンフォントの表示のさせ方。

たとえば Twitter Bootstrap にも入っている Glyphicons とかだと空の span 要素にクラスつけて表示させる感じですね

<span class="glyphicon glyphicon-map-marker"></span>

それを CSS だけでやりたい場合。フレームワークが吐き出す html に、CSS の after やら before やらで差し込みたい場合とか。

.sample:before {
    font-family: 'Glyphicons Halflings';
    content: "\e062";
}

こんなかんじでいけました。