Font Awesomeを使ってSNSボタンを設置しよう

2017/04/03
2015/02/12

Font Awesomeを使ってSNSボタン（アイコン）を設置する方法を紹介します。

SNSボタンは、WordPressプラグインや手動で設置できますが、公式のSNSボタンはいまいちピンと来ないという方もいるでしょう。

そこで便利なのが、Font Awesomeです。

Font Awesomeは、シンプルなWEBアイコンフォント集。
SNS以外にも多数のアイコンが用意されています。

フォントなので、CSSで色や効果などを設定することが可能。

公式のSNSボタンをつかった時にありがちな、ボタンの高さ（位置）がずれる問題とは無縁なのもメリットです。

ちなみに、メモトラのサイドバー＞プロフィール下のSNSアイコンも、Font Awesomeを使って表示しています。

Font Awesomeの使用は無料ですが、一応ライセンスは確認しておいて下さい。
Font Awesomeのライセンス

1 Font Awesomeの使い方
- 1.1 補足
- 1.2 サンプルコード
2 さいごに

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を書き換えて下さい。