こんにちは新人森田です。
今日はちょっと女子力高めでお送りしたいと思います

全然キャラじゃなかった！やめます。
なんでいきなりこの流れかというと、単純にアイコンフォント使いたかったからです。こまごましたもの好きとしてはこのこまごま感はたまりません！ガラケーの時に絵文字サイトから毎日絵文字DLしてたし、当然といえば当然の流れなのかも。

そんな見て楽しい・使って楽しいアイコンフォントが今回のテーマです。

アイコンフォントとは

サイトにアイコンを使おうと思ったら、まずアイコン画像を作ってアップして…というのがこれまでの流れでした。でも今はwebフォントサービスの充実によって、アイコン使用がもっとお手軽になったんです。

webフォントについてはまた今度まとめたいと思うので、ここではさわりだけ。
フォントは通常、使用デバイスに入っているものしかブラウザに反映されません。WindowsだとPCで明朝体（小説の本文みたいな文字）を見る機会って少ないんじゃないでしょうか。そうなるとせっかくフォントにもこだわって作ったデザインが台無しです。でも、webフォントを使えばサーバーからフォントファイルを開いて使えるので、見え方が統一できます。

そんな便利なwebフォントは文字だけではなく、アイコンも取り扱っています。
アイコンが画像でなくwebフォントになることでどんな利点があるかというと、

編集が便利

画像だと、何か変更があった場合いちいち作り直して差し替えなければなりません。一方webフォントは文字扱いのため、cssを修正すればすぐ変更が反映されます。イッツ時短。

サイズ変更しても見え方が変わらない

web上の画像を拡大していくとどんどん荒くなっていってファミコンの画面みたいになっちゃいます。解像度の関係でそうなるんですが、webフォントは画像（ドット）としてではなくベクトル（方向と長さの情報）で形状を表現しているので拡大縮小自由自在です。

画像：Font Awesome

ここまで知ると、今すぐ使いたくなってきちゃったんじゃないんでしょうか。

Font Awesomeを使ってみる

というわけでハレノヒブログがお世話になったFont Awesomeというサービスを使ってみましょう。

http://fontawesome.io/

トップページのボタンでまずファイルをDLします。
DLしたzipファイルを展開したらcss、fonts、less、scssのファイルが入っているので、必要なものをコピペします。

そしてリンクします。ここでは親のscssにfont-awesomeのscssをインポートさせています。

準備完了です。
サイトを参考に使いたいアイコンを選んで、htmlにコードを貼ればオッケーです。

単なるマークだけではなくソーシャルアイコンなど豊富な種類が使いたい放題！

 

わーいわーい

まとめ

web上でメインの情報伝達ツールは文字です。文字といってもメニュー・タイトル・本文と、それぞれ意味合いの異なった沢山の文字が詰め込まれています。ただ文字だらけの画面ばっかり見てると疲れてしまいますが、ワンポイントでアイコンがあると情報整理されて画面が見やすくなると思います。UIにも一役買ってくれてる感じです。

こまごましたもの好きな森田はどこでどのアイコンを使おうかとワクワクしまくりでしたが、もちろん使い過ぎは厳禁です。
また、今回取り上げたFont Awesomeの他にも、オリジナルのデータをアイコンフォントに出来るサービスもあります。オリジナルなアイコンフォントだなんてムネアツですね！そのうち作ってみたいです。

そんなところで今回はこの辺で！押忍！