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を参考にすると、良いかと思います。
Adobe CCが29,800円
2019年2月に価格改定が行われるAdobe Creative Cloudですが、実は29,800円で購入・更新する方法があります。
方法はいたって簡単でたのまなのオンライン通信講座（Adobe Creative Cloud 12ヶ月版が付属）を申し込むだけ。
詳しい申込み方法や仕組みについては下記記事で紹介しているので、そちらをご覧ください。