【Font Awesome】WordPressでアイコンフォントを使う方法

例えば、FacebookやTwitter、InatagramなどのSNSのボタンやアイコンなどをホームページ内で使いたいときに、無料でたくさんの種類のアイコンが使用できる「Font Awesome」というサービスをご紹介いたします。

WEBアイコンフォントとは

通常の画像データとは違い、文字（フォント）として使用できるので、取り扱いしやすく、拡大縮小してもきれいに表示でき、色も自由に変えられます。

Font Awesomeを使う準備

Font Awesomeは、無料で（有料版もありますが）商用利用が可能で、ご自身のホームページなどにWEBアイコンフォントを埋め込むことができます。

Font Awesomeを使うためには、

• サーバーにアップロードする
• CDNを利用する
• プラグインを使う

という方法がありますが、WordPressで一番簡単な方法が、プラグインを使う方法です。それ以外の方法だと、データをダウンロード・アップロードしたり、アカウントを作成する必要があったりと少し面倒です。

「Font Awesome」プラグインのインストール

ワードプレスのダッシュボード「プラグイン」＞「新規追加」から、「Font Awesome」と検索して、以下のプラグインを「今すぐインストール」をクリック、次いで「有効化する」をクリックしてください。これだけでFont Awesomeを使える状態になります。

Font Awesomeの使い方

Font Awesomeのサイトに行って、使いたいアイコンフォントのHTMLコードを取得します。

https://fontawesome.com/

こちらのサイトの左上の検索欄で使いたいアイコンを検索します。

例えば、facebookのアイコンが欲しいとしたら、「facebook」と入力し、虫眼鏡部分をクリックします。

facebookに関連するアイコンの候補が出てきますので、この中から選んで、それをクリックしてください（色が薄くなっているものは有料版のみ使用可能です）。

画面上部の <i class=”～”></i> の部分をコピーします（カーソルを合わせて、Copy HTMLをクリック）。

あとは使いたいところにところに貼り付けます。

アイコンフォントの貼り付け方

アイコンフォントを表示させるには、先ほどコピーしたコードを貼り付けるのですが、ワードプレスの場合は、ページの編集画面で「カスタムHTML」ブロックを追加し、そこにコードをコピペしてください。

<i class="fab fa-facebook-f"></i>

あとは、普通のテキストと同様にCSSで文字サイズや色を変えることができます。

ダッシュボード「外観」＞「カスタマイズ」で、追加CSSに以下のコードを追加すると、

.fa-facebook-f{
	font-size:30px;
	color:#4267B2;
}

facebookのアイコンフォントの大きさや色が反映されます。

まとめ

以上のように「Font Awesome」のWEBアイコンフォントで、SNSアイコンボタンやイラストアイコンなどを取り入れることによって、より本格的なホームページが作れると思いますので、大変お勧めです。