アイコンを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. 作業1

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

  5. 作業2

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

  7. 作業3 作業4

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

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



  10. ダウンロードされたファイルを解凍後、使いたいページのサーバーにアップロード。

  11. 今回は、ドメイン直下に「font」フォルダを、WordPressのテーマに「css」フォルダをアップロードし、「css」フォルダ内のCSSファイルでフォントを読み込むURLを適時変更しました。

  12. 「css」フォルダ内のCSSファイルを参考に、テーマのCSSを適時変更。
    例  ←を表示したいときは…
    <i class="icon-emo-beer"></i>
    …と記述するのですが、本来のiタグの意味とはかけ離れるので、spanタグが良いんじゃないかと思います。
    <span class="icon-emo-beer"></span>
    での表示例

…といった感じです。

変更前と変更後

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

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

変更前1

変更前1

変更後1

変更後1

変更前2

変更前2

変更後2

変更後2


変更前3

変更前3

変更後3

変更後3

変更前4

変更前4

変更後4

変更後4


 カレンダーの部分は、すでにアイコン画像背景からCSSのみでの記述に変えてあるのですが…(笑)。

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

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

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

コメント

*




Copyright©2000-2019 KIYOS LOG.All Rights Reserved.