ちえてらすコンサルティング

超便利、アイコンフォント!Webフォントの活用(1)

fontawesome

ホームページでアイコン画像って使いますよね?
メールや電話やダウンロード・・・
大きさや色ごとにアイコンを用意して使っているのですが、 もうそんなことしなくていいんです!
どうしてなのか? Webフォントっていう仕組みを使います。
WebフォントはCSS3.0で規定されている仕組みです。
表示される相手のパソコン環境に依存せずに、Webサーバー上のフォントを表示させる技術です。 有名どこではGoogle Fontsってのがあります。

しかし日本語フォントが少ないこと、日本語フォントは有料であることが多いことから、これまで気になってはいたのですが手が出せないでいました。
そんな時見つけたのが、Font Awesomeです。
Font Awesomeとは”すげ〜!フォント!”って意味で、まさにすごいです。
文字フォントでなくアイコンのフォントなんです!しかも無料!これなら使うシーンがたくさんあります。 登録されているフォントも300種以上あって、たいていのアイコンは代用できます。

どんなことができるかというと・・・さっそくこのサイトでも使っていますが

header_sample

以前は画像ファイルを使っていたものを、Webフォント”Font Awesome”に変えているんです!

その他にも、

大きさを変えたり

色を変えたり

回転させたり

これらのアイコンは画像ではなく、フォントってところがすごいところ。
画像だと、大きさごと、色ごとに画像ファイルを用意しないといけませんが、これはフォントなので属性設定のみでいろんな表現ができます。

こんなふうにHTMLに書いているだけです。

<i class=”fa fa-cog” style=”color: #ff6347; font-size: 30pt;”></i>

これは超面利でしょ!
次回はどうやって使うか、FontAwesomeの使い方をご紹介します。