Webフォントを利用して画像を使わずにアイコンを表示

DigiPressテーマでは、軽量化、拡張性、高度な柔軟性を実現させるため、テーマのデザイン用の画像素材は極限まで減らしています。

その中で、DigiPressではテーマに組み込みのWebフォント(※)を利用して、画像ではなくアイコン専用のフォントで見た目にはまるで画像でデコレーションしているようなコンテンツを表現することができます。

Webフォントとは？

Webフォントとは、オンライン上にあるフォントデータをCSSから読み込み、ブラウザでアクセスされるOSのフォントに依存することなく、どのマシンからでもあらゆるフォントを同じように用いて、そのフォントのデザインの書体を表示することができる仕組みです。

また、画像ではなく実際はフォントデータであるため、アイコン(フォント)のサイズは自由に指定でき、拡大しても画像のように粗くなることはありません。

アイコンフォントクラス(CSS)マップ

アイコンフォント用CSSクラス一覧

アイコンフォントの表示の仕方

アイコンフォントの表示の仕方は以下を参考にしてください。

一般的な表示例

This is Apple.

Icon Bag (20px)

Icon Diamond (35px)
LeafWith Label

このコード

<i class="icon-apple"></i> This is Apple.
<div class="icon-bag ft20px">Icon Bag (20px)</div>
<span class="icon-diamond ft35px lightblue">Icon Diamond (35px)</span>
<span class="icon-leaf label label-green">Leaf</span><span>With Label</span>

インラインでの表示例

お問い合わせ　ホーム　いいね！

昨日、写真送ったけど届いてる？
あ！iPhoneにメール来てたの忘れてた！

このコード

<a href="#" class="btn icon-mail ft16px">お問い合わせ</a>　<a href="#" class="btn btn-green icon-home ft18px">ホーム</a>　<a href="#" class="btn btn-blue icon-thumbs-up ft18px">いいね！</a>

昨日、<i class="icon-picture blue"></i>写真送ったけど届いてる？
あ！<span class="icon-mobile">iPhone</span>に<span class="icon-mail green">メール</span>来てたの忘れてた！