CSSでアイコン型Webフォントを追加してみました。

昔のHPのアイコンは画像とかを使っていて、ボタンの様なものを設置したものです。今ではCSSやHTML5によって様々なアイコン表現が可能です。そのひとつがアイコン型Webフォントで、更にCSSを使って非常に面白い効果を付加できます。何より、画像のように重くなく、多くのデバイスで同じように表示できるのが強みだと思います。
以前よりSNSのアイコンを使いたくて、画像を使っていましたが、今回はCSSでレスポンシブかつアニメーションを付けたものにチャレンジしてみました。
今回のアイコンはFont AwesomeのCSSを使っています。このサイトは数多くのアイコンを作成しましたので、もっと汎用的なものも今後使うかもしれません。

フラットな感じにしてみました。Font AwesomeをMaxCDNの協力によって、一行のコードで読み込むことが可能です。何もインストールする必要はありません。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

もちろん、CSSをダウンロードしてサイトにアップロードしてもいいのですが、これがとても簡単です。
サイトに適用するには単純に以下のコードでできます。
<i class="fa fa-rss fa-2x"></i>
ただし、このコード内とCSSスタイルシートで色々と見え方を変えることができるので今回の設定を紹介します。

適用は以下の通りですが、フラットな丸いものにしました。

border-radius: 50%;で丸くします。マウスを乗せたときの色は全て同じにしています。
さらに、アイコンの大きさは2倍にしています。faを通常サイズとすると、fa-lg（約1.33倍）、 fa-2x（2倍）、 fa-3x（3倍）、 fa-4x（4倍）、 fa-5x（5倍）の5パターンあります。
以下にCSSコードを紹介します。ここは別段特別なことはなく、背景色やアイコンの表示範囲の大きさを決めています。

#social-icon a {

  text-align: center;

  display: inline-block;

  margin: 0 5px 5px 0;

  padding: 0;

  color: #F9F9F9;

}

#social-icon i {

  width: 50px;

  height: 50px;

  margin: 0;

  border-radius: 50%;

  background: #999;

  line-height: 50px;

  text-align: center;

}

サイトに組み込むためのコードの詳細は以下の通りです：

<div id="social-icon">

<a href="#"><i class="fa fa-twitter fa-2x"></i></a>

<a href="#"><i class="fa fa-flickr fa-2x"></i></a>

<a href="#"><i class="fa fa-tumblr fa-2x"></i></a>

<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>

<a href="#"><i class="fa fa-facebook fa-2x"></i></a>

<a href="#"><i class="fa fa-rss fa-2x"></i></a>

</div>

マウスを乗せたとき色が変わるようにしています。hoverコマンドですが、色はちょっと工夫して考察してみました。それぞれのSNSでアイデンティティのある色がありますので、せっかくなのでそれらを選んでみました。色は、BrandColorsというサイトです。例えば、twitterのライトブルーな色のコードは
#00a1e9;
ですのでマウスでなぞるとそれぞれの特色になるようにしました。設定したSNSの色は各色以下の通りです。

#social-icon i:before { padding 0; line-height: 50px; }

#social-icon a:hover .fa-twitter { background: #00a1e9; }

#social-icon a:hover .fa-flickr { background: #ff0084; }

#social-icon a:hover .fa-tumblr { background: #35465c; }

#social-icon a:hover .fa-google-plus { background: #dd4b39; }

#social-icon a:hover .fa-facebook { background: #3b5998; }

#social-icon a:hover .fa-rss { background: #ff8c00; }

他にも色々と使い方がありますので、様々な使い方が考えられそうです。多機能なアイコンがデバイスに問わず正しく表示され、しかも動作が軽いとなれば言うことはありません。とても気に入りました。

※今は上記の様にCSSで表示できますが、今後HPのレイアウト変更によって使えなくなる可能性もあります。
アイコン型Webフォントの様子はこのバージョンのHPの右上にて表示できます。

参考サイト：http://weboook.blog22.fc2.com/blog-entry-397.html
Font-Awesomeのサイト：http://fortawesome.github.io/Font-Awesome/
ブランドの色コード：http://brandcolors.net/