カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

WEBフォント「Font Awesome」でアイコン画像作成の手間を省いてみた

ついに流行りに乗ってwebフォントを使ってみました!! 案件でだけどw
めずらしく「フラットデザインを好きにやっていいよ」案件だったのでアイコンをwebフォントで対応させてphotoshopを極力立ち上げない(笑)サイトを作りました☆

いろいろwebフォントがある中で、メジャーなFont Awesomeを使ってみました。
アイコンも見やすいしね。

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サイトで扱う際のポイントについて等書こうと思います!

Leave a Reply

メールアドレスが公開されることはありません。 が付いている欄は必須項目です