Font Awesomeを使ってみてわかった。アイコンフォントが生産性をアップさせる5つの理由

20 SHARES
Photo by Seth Warburton

Webフォントであるということで、どうかなぁと思っていたのですが、試しにこのサイトのリニューアルでFont Awesomeというアイコフォントを使ってみた結果、アイコンフォントが好きになったので、まだ試してない人にフォントアイコンの良さを知ってもらえたらなと記事にしてみました。

一応Font Awesomeとは?

361個のアイコンが使えるWebフォントアイコンです。たいていのものはあるので、これだけでも結構いけます。

361個のアイコンが使える

使い方は簡単で、空のSPANタグなどにアイコンごとに振られている.icon-muisicのようなクラス名を付けるだけでアイコンが表示されます。

<span class="icon-music"></span>    

1. 色を変えれる

フォントなので、CSS colorで色を変えることができます。いちいちPhotoshopで編集しなくてもいいので楽チンです。

2. 大きくしてもきれい

アイコンのサイズは、font-sizeで変更できます。ベクターフォントなので、どれだけ大きくしてもギザギザになりません。スマートフォンなどの高解像度デバイスでみてもきれいに見えます。

3. アニメーションできる

CSStransitionを使い色をアニメーションさせることができます。これは画像で実現しようとすると難しいですね。アイコンにマウスをあわせてみてください。

4. アウトラインにシャドウを付けれる

CSStext-shadowを使うとアイコンにシャドウが付きます。画像と違いアイコンのアウトラインに対してシャドウが適応されます。

5. Photoshopでも使える

フォントなのでPCいインストールすれば、同じアイコンをPhotoshopFireworksなどのソフトでも使うことができ、カンプなど作る際にとても便利です。
Illustratorだけはなぜかうまく表示されませんでした。

Photoshopでの使い方

  1. フォント一覧から"FontAwesome"を選択する
  2. このページから使用したいフォントを選んでコピペする
Photoshopでフォントアイコンを表示させた例。

 

 

たくさんアイコンを使ってもリクエスト数はかわりませんので、CSSスプライスと同じような効果があります。 

もちろんフォントであることは、表示に時間がかかったりとか古いブラウザが非対応(IE7以降で使える)とデメリットもあると思います。まぁ、作成時はかなり生産性があがりますので、トレードオフだと思って決めたらいいと思います。


SHARE

友達にもシェアしよう

20


Discussion



Recent posts