Fontello - icon fonts generatorのアイコンフォント

2013/08/29
左向きの大きな矢印

 

というような、アイコンフォント

Fontello - icon fonts generator(http://fontello.com/)で、必要なアイコンを選択してダウンロードすることができる。

 現在、使用しているテーマのtwentythirteenに、この中から選んだアイコンフォントを使用できるようにしてみたけど、うまく表示できるか?

icon-heart-empty0xe80c
icon-heart0xe80d
icon-mail0xe804
icon-eject0xe800

手順は、以下のとおり、

 1.Fontello - icon fonts generatorからダウンロード

必要なアイコンをクリックして選択、ダウンロード、解凍する。(http://fontello.com/

2.ダウンロードしたファイルを転送

 テーマディレクトリに「fonts」フォルダを作成して、その中にダウンロード・解凍したフォルダごと転送。twentythirteenの場合もfontsフォルダを使用しているが、子テーマの中に作ったけどいいのかな?

3.style.cssにインポートの設定

 デモ版のHTMLでは、2つのCSSファイルを読み込んでいるので、2つをインポートしてみた。

@import url('./fonts/fontello-27icons/css/animation.css');
@import url('./fonts/fontello-27icons/css/fontello.css');

結果は、、、
ダウンロードファイルをテーマフォルダの適当な所に置いてCSSを読み込んだだけですが。

icon-spin50xe802

とか

<div title="Code: 0xe802" class="the-icons span3">
<i class="icon-spin5 animate-spin"></i>
 <span class="i-name">icon-spin5</span>
<span class="i-code">0xe802</span></div>

 で表示、また、以下の表示で

<div title="Code: 0xe802" class="the-icons span3">
<i class="icon-spin5 animate-spin"></i>動くアイコン</div>

こんな感じ

動くアイコン
色を付けてみると