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

 

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

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

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

手順は、以下のとおり、

 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を読み込んだだけですが。

とか

<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>

こんな感じ

色を付けてみると