WEBフォント「Font Awesome」でアイコン画像作成の手間を省いてみた
ついに流行りに乗ってwebフォントを使ってみました！！ 案件でだけどw
めずらしく「フラットデザインを好きにやっていいよ」案件だったのでアイコンをwebフォントで対応させてphotoshopを極力立ち上げない（笑）サイトを作りました☆
いろいろwebフォントがある中で、メジャーなFont Awesomeを使ってみました。
アイコンも見やすいしね。
フォントやcss一式を公式サイトからダウンロードして、自分のサーバーにアップする方法と、以下cssソースを<head>内に読み込ます方法があります。私はめんどくさかったので後者の方法でw
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
まあせっかちとか、単なるバカとかだとこれだけでアイコンが表示される！ と早合点しがちですが（お前くらいだよ！）もちろんちゃんとソースを書かないといけません
当方、こちらのサイトを参考にさせていただきました。便利すぎて吐きそう！
[まとめ]Font Awesomeのイケてる使い方をまとめました
参考にさせていただいたくせにclass=”fn fn-xxxx”のfnを付けてなかったから表示されなくて何時間かハマってたけど＾＾；
色んなサイトで警告されてたのに！！w さすがのオレクオリティw
ちなみにhtml上でfnをつけられない場合、cssの方に”font-family:FontAwesome”を記述すれば表示されます。
wordpressサイトだとcssのclassを<li>にどうしてもつけられない（特にウィジェットまわり）ことがあるのでcssでどうにかならんかなーと試行錯誤している時にこの記事がとても参考になりました。
Font AwesomeをCSSのcontentプロパティで使用する
それからアイコン一覧対応表的なものw
それぞれのunicodeコードも載ってるのでこれ必須です。
Font Awesome Icons
上の方で書いた通りclass=”fn”を忘れる、とかunicodeをcssに書き込む時とwordpressテンプレートファイルのphpに書き込む時とで記述を間違える等、初めの数時間は結構つまづきましたが（＾＾；）理解するともう「なんだ、これは・・・」とオレの中の空条承太郎が小野Dの声で脳内でつぶやきまくります（頭悪くてすみませんね！←逆ギレ）。ってくらい便利！！
備忘録も兼ねて、この後実践編として自分が試した使用方法とかwordpressサイトで扱う際のポイントについて等書こうと思います！