日別アーカイブ: 2013/07/22

アイコンフォントを使ってみたら、1分で導入できて驚いた

自分のWEBサイトリニューアルをしています。
せっかくなので、新しい技術を沢山取り入れたいと思っています。

その中のひとつが、アイコンフォント。
画像じゃないという点で、色々メリットデメリットはあるみたいです。
とはいえ、画像の切り出しやCSSスプライトを気にしなくて良くなるのは、WEB屋さんにとって大きな利点。
何はともあれ試してみましょう!

今回アイコンフォントに使用したサービスは、こちら。
Font Awesome

どんなことができるの?

Font Awesomeのトップページで書いている、メリットをざざっと訳すとこんな感じ。

  • 361個もアイコンあるよ
  • CSSでアイコンサイズ、色、シャドウなどやり放題!
  • ベクターだから、どんなサイズにも対応するよ
  • 商用無料!
  • IE7もサポートしてるよ
  • Retinaディスプレイにも対応だぜ
  • Bootstrapも完全対応!
  • チートシートもあるし、インストール型のフォントもあるよ!
  • スクリーンリーダーにも対応しちゃってるんだから!

これだけ読むと…ものすごいですね。
使わない意味がわからないってかんじです。

ライセンスはというと…

フォントライセンス : SIL OFL 1.1
コードライセンス : MIT License

なにこれすごい。

使い方

使い方は超簡単。
管理人はBootstrapを使っていないので、必要なコードはたった一行だけ。
(Bootstrap使ってる人でもたった二行だよ!)

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

これをヘッダに入れましょう。

で、アイコンフォントを使用したいところに、下記コードを入れてあげます。

<i class="icon-camera-retro"></i>

はい、完成!

↑実際にアイコンフォントで表示してますよ!

マジ簡単すぎです。
こんな簡単でいいのだろうか。

アイコンはどんなのがあるの?

めちゃくちゃいっぱいあります。
こちらにリストが。

オプション

アイコンフォント、いろいろなオプションがあります。
詳しくはこちらにサンプルコード&デモがありますのでどうぞ
Now Loadingのぐるぐるまわるやつとか、もはやフォントとは思えないですね…

結論

1分で導入できるので、とりあえず使ってみるべし。

簡単でクオリティ高いアイコンフォントがサラリと使える俺マジカッケー!と、感動出来ます。
一度使ってみると病みつきになってしまうかも。

Font Awesome、FontにAwesomeだぜ!!
お後がよろしいようで…