前から使ってたいと思ってた Font-Awesome っていうフォントを使ってBLOGを調整してみた。

使ってみたのは、

  • 左のメール, Github, Instagram へのリンクアイコン
  • 記事ページ上部のタグアイコン
  • 前のページ, 次のページへ進むリンクの矢印アイコン
  • 各種SNSへの投稿ボタンアイコン

このフォント何がすごいって言うと、名前の通りフォントベースでアイコンを表示してくれる。
フォントベースだと何がすごいかって言うと、色や大きさを変えたり出来るのはもちろん、CSSで色々見栄えを調節できたりする。

今回ちょっとCSSで変化をつけてみたのが下のSNSへの投稿ボタン。

sns_link

通常は黒で表示しておいて、マウスが乗った時にそのSNSのイメージカラーに変化するようにしてみた。↑はFacebookにカーソルが載ってる状態。

適当にクラスをあてて、

みたいにするだけで、色を変化させられる。

今時だったらJS使って画像を差し替えるだけでもすぐ出来るんだけど、CSSだけで出来ると結構気持ちがいい。

使い方は簡単で、HTMLのヘッダーに 「<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">」 を挿入して、使いたい場所で 「<i class="fa fa-camera-retro"></i>」 を入力してやるだけ。これだけで、この場合は がでてくる。
CSSの内部でWebFontを呼び出して、指定されたアイコンの文字コードを追加して実現してるみたい。

その他に、色を付けたかったら 「<i class="fa fa-camera-retro" style="color:brown"></i>」 で みたいに色を付けたり、 「<i class="fa fa-camera-retro" style="text-shadow: 3px 3px 3px gray"></i>」 で のように影をつけたりも出来る。
こういう文字の間に画像を入れる時ってセンターとか高さが合わなくて結構面倒なんだけど、そういうこともなくて非常によろしい。

詳しい使い方は、 GetStarted とか Examples を見ると分かりやすい。で、使えるアイコンは ここ に370種類ある。

実は Pocket のアイコンがなかったから似てる適当なアイコンで済ましたんだけど、そういうWebサービスのロゴ以外だったら十分揃うんじゃないかな。

もうちょっとしたワンポイントで使うアイコンとかはこれだけで十分って感じがしてる。フォントにすごいよ。