アイコンをWebフォントに置き換え

　今までアイコン表示に画像を使ってましたが、Webフォントの使用法の勉強もかねてWebフォントに置換えてみました。

なぜ、Webフォント？

　まず、なんでWebフォントに使用と思ったかというと、iPhoneで最大にズームした時にアイコン画像が綺麗に表示されてないので、これをなんとかしたいなぁ〜と常々思っていました。

　そんな時、アイコンのWebフォントの存在を知り、これに置換えたら綺麗に表示されるのではないかと思い、着手しました。

　一応、アイコンのWebフォントのメリット等をあげておきます。といっても、いろんなサイトを見てまとめたんですけどね（笑）。

アイコンWebフォントのメリット

• 拡大しても荒れない（Retinaディスプレイでも安心）

　これ、僕がWebフォント導入を決めた大きな理由ですね。

• CSSプロパティを使って、大きさや色を設定出来る。(font-size, color)

　画像だと、大きさごとに書き出したりしないといけないけど、WebフォントならCSSで大きさ自由自在！

　おおざっぱにまとめるとこんな感じかと…。

　メリットがあるならデメリットもあるのが、世の常というわけででメリットをまとめようかと思ったんだけど、あんまり僕にはデメリットに感じなかったので、参考にしたページのURLをおいておこうかと…（笑）。

ベクターデータで軽量だと噂のアイコンフォントを導入してみた | girigiribauer.com

　では、どのような作業をしたのかを…

導入編

　今回は、「Fontello – icon fonts generator」を利用して、必要なアイコンを選択しそれをダウンロードして、埋め込んでます。

1. Fontello – icon fonts generatorにアクセス
2. 利用したいフォントを選ぶ。





3. 名前を変えたい場合は、「Customize Names」をクリックし変更する。





4. 「Customize Codes」をクリックしアイコン上部の枠に入力する。






5. 全部、入力したら、右上の「Download webfont」をクリックする。


全部、入力したら、右上の「Download webfont」をクリックする。




6. ダウンロードされたファイルを解凍後、使いたいページのサーバーにアップロード。
7. 今回は、ドメイン直下に「font」フォルダを、WordPressのテーマに「css」フォルダをアップロードし、「css」フォルダ内のCSSファイルでフォントを読み込むURLを適時変更しました。
8. 「css」フォルダ内のCSSファイルを参考に、テーマのCSSを適時変更。
   例　　←を表示したいときは…

   <i class="icon-emo-beer"></i>

   …と記述するのですが、本来のiタグの意味とはかけ離れるので、spanタグが良いんじゃないかと思います。

   <span class="icon-emo-beer"></span>

   での表示例

…といった感じです。

変更前と変更後

　では、変更前と変更後を比較してみましょう。

　以下の画像は、iPhone 5でほぼ最大まで拡大してスクリーンショットをとったものです。

変更前１

変更後１

変更前２

変更後２

変更前３

変更後３

変更前４

変更後４

　といった感じで、ちょっと時間がかかりましたが、出来上がりです。

　あ、そうそう、WP_touchにはまだ適応させてないんで、スマホとかタブレットでごらん頂いてる方は、PC用の表示にしないと、見れないです。

　次は、レスポンシブ対応かな？