Font Awesomeを使ってSNSボタンを設置しよう
Font Awesomeを使ってSNSボタン（アイコン）を設置する方法を紹介します。
SNSボタンは、WordPressプラグインや手動で設置できますが、公式のSNSボタンはいまいちピンと来ないという方もいるでしょう。
そこで便利なのが、Font Awesomeです。
Font Awesomeは、シンプルなWEBアイコンフォント集。
SNS以外にも多数のアイコンが用意されています。
フォントなので、CSSで色や効果などを設定することが可能。
公式のSNSボタンをつかった時にありがちな、ボタンの高さ（位置）がずれる問題とは無縁なのもメリットです。
ちなみに、メモトラのサイドバー＞プロフィール下のSNSアイコンも、Font Awesomeを使って表示しています。
Font Awesomeの使用は無料ですが、一応ライセンスは確認しておいて下さい。
Font Awesomeのライセンス
Font Awesomeの使い方
ファイルをダウンロードして設置する方法もありますが、今回はCDNを使って設置する方法を解説します。
1.Font Awesome＞Get Startedで、コードをコピーします。
下記コードは、2015/02/12現在のもの。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
2.コピーしたコードを貼り付けます。
貼り付ける場所は、headタグ内。
WordPressの場合は、使用テーマのheader.php内にあります。
<head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head>
WordPressのテーマ、Stinger5（20141227版）を使用している場合は、47行目を書き換えて下さい。
※バージョン番号だけ書き換えでもOK。（4.0.3 → 4.3.0）
3.Font Awesome＞Iconsで、使いたいアイコンを探してクリック。
今回は例として、facebook-squareを選びました。
4.コードをコピーします。
<i class="fa fa-facebook-square"></i>
5.コピーしたコードを、設置したい場所に貼り付けます。
実際に表示させた様子。
補足
デフォルトの状態ではアイコンが小さいので、大きくする方法を紹介します。
方法はとても簡単、classに半角スペース + fa-lg,fa-2x,fa-3x,fa-4x,fa-5xを追加するだけ。
<i class="fa fa-facebook-square fa-lg"></i> fa-lg <i class="fa fa-facebook-square fa-2x"></i> fa-2x <i class="fa fa-facebook-square fa-3x"></i> fa-3x <i class="fa fa-facebook-square fa-4x"></i> fa-4x <i class="fa fa-facebook-square fa-5x"></i> fa-5x
実際に表示させるとこんな感じになります。
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
サンプルコード
メモトラで使っているコードをサンプルとして紹介します。
htmlのサンプルコード。
<ul class="follow-button"> <li class="fbpagebtn"><a href="" target="_blank" title="Facebookページ"><i class="fa fa-facebook-square fa-4x"></i></a></li> <li class="twbtn"><a href="" target="_blank" title="Twitter"><i class="fa fa-twitter-square fa-4x"></i></a></li> <li class="gpbtn"><a href="" target="_blank" title="Google+"><i class="fa fa-google-plus-square fa-4x"></a></i></li> <li class="feedlybtn"><a href="http://feedly.com/i/subscription/feed/feedのURL" target="_blank" title="feedly"><i class="fa fa-rss-square fa-4x"></i></a></li> </ul>
href=””の部分に、ご自分のURLを入れて下さい。
feedlyは、feedのURLを書き換えます。
cssのサンプルコード。
.follow-button::after{
content:"";
display:block;
clear:both;
}
.follow-button li {
float: left;
display: table;
width: calc(100% / 4);
height: 90px;
}
.follow-button li a{display: table-cell;
vertical-align: middle;
text-align: center;}
.follow-button li.fbpagebtn a{color:#3B5998;}
.follow-button li.twbtn a{color:#55acee;}
.follow-button li.gpbtn a{color:#dd4b39;}
.follow-button li.feedlybtn a{color:#6cc655;}
設置環境に合わせて、cssを書き換えて下さい。
さいごに
各アイコンの色が決まらないという方は、BrandColorsを参考にすると、良いかと思います。
