FontAwesomeの使い方とWordpressへの導入方法。登録方法からCDNの読み込み方法。

FontAwesomeの導入方法と使い方をまとめました。

簡単にアイコンを使うことが出来るので、Wordpressを使ったサイトによく使用されています。
読み方は「フォントオーサム」とされています。現在バージョン5が主流ですが、バージョン4についてもほとんど同じ要領で使用することが可能です。

なお、バージョン6は2021年に公開予定のようです。

FontAwesomeの登録方法とCDNの読み込み方法をまとめました。
主にWordpressを使ったサイトでの使用方法を記載しています。

この記事の目次

FontAwesomeの使い方

初心者の方向けの記事になりますので、カスタマイズやCSSを使った方法は記載しておりません。
サイトにFontAwesomeのアイコンを表示させるまでの内容となります。

FontAwesomeを使用する方法はバージョンに関係なく、以下の２通りがあります。

外部サーバー（CDN）からアイコンデータを読み込んで使う。
自サーバーにアイコンデータをアップロードして使う。

スタンダードで簡単な使い方は１のCDNを使用する方法です。
サイト内のヘッダーにFontAwesomeのCDNへのリンクを埋め込んで読み込むだけで使用できます。

ただ、Wordpressの多くテーマは始めからテーマ内にFontAwesomeのアイコンデータを保存しているものが多く、2の方法で使っているテーマも少なくありません。

なので、まず初めに自サイトがFontAwesomeに対応しているのか？使用できるバージョンは何なのか？を確認する必要があります。

FontAwesomeが使用できるか確認する

自サイトにFontAwesomeが読み込まれているのかを確認する方法はヘッダーを覗く方法もありますが、実際にアイコンを表示させてみて確認するのが手っ取り早いと思います。

以下のコードを下書きにコピペし、プレビューしてみてください。

Font Awesome4（fa fa-camera）
<i class="fa fa-camera"></i>
Font Awesome5（fas fa-camera）
（無料スタイル：Solid）
<i class="fas fa-camera"></i>
Font Awesome5（fab fa-cpanel）
（無料スタイル：Brands）
<i class="fab fa-cpanel"></i>
Font Awesome5（far fa-camera）
（有料スタイル：Regular）
<i class="far fa-camera"></i>
Font Awesome5（fal fa-camera）
（有料スタイル：Light）
<i class="fal fa-camera"></i>
Font Awesome5（fad fa-camera）
（有料スタイル：Duotone）
<i class="fad fa-camera"></i>

アイコンが表示されない：FontAwesome未対応
FontAwesome4のみの表示：FontAwesome4対応
有料スタイル以外のアイコンが表示：FontAwesome5対応
すべてのアイコンが表示：FontAwesome5 Pro対応(有料)

といった感じで自サイトがどのバージョンに対応しているのかが一発で分かります。

FontAwesomeが読み込まれていない場合

コードを表示してみてアイコンが一切表示されない場合、FontAwesomeが読み込まれていません。
後述する方法でFontAwesomeに登録し、CDNをサイトに読み込ませる必要があります。

FontAwesomeのバージョン4が読み込まれている

FontAwesome4のアイコンのみが表示されている場合、テーマによってバージョン4が読み込まれています。
画像のようにバージョン5のアイコンは表示されないか□になります。

FontAwesomeのバージョン5(以降)が読み込まれている

バージョン5には4との相互性もあるためこのように表示されます。
（すべてのバージョン4のアイコンが表示できる訳ではありません。）
無料バージョンですと、有料スタイルは表示できませんのでこうなります。

バージョン4と5の違い

使いたいアイコンを探し出す際に、アイコン表示用のコードも表示されますので普通に使う場合は気にしなくてOKです。

FontAwesomeバージョン4ではクラス名（Prefix）は「fa」の１つだけで特に気にせず使用できました。

「<i class="fa fa-camera"></i>」　→　「」

こんな感じでクラス名とアイコン名を指定するだけで表示できます。

バージョン5では「fas」「far」「fal」の３つのスタイルが追加されました。
またブランドアイコンが無料の「fab」と有料の「fad」に分類されました。

Prefix（Class名）	アイコンスタイル	バージョン	料金
fa	-	4	無料
fas	Solid	5	無料
fab	Brands	5	無料
far	Regular	5	有料
fal	Light	5	有料
fad	Doutone	5	有料

バージョン5でクラス名につけるプレフィックスが多くなり、ややこしくなりました。

とはいえ、使いたいアイコンを公式ページから探して使用する場合は対応したコードが表示されますので特に意識しなくても使えます。

外部リンク

公式ページに何が違うのか詳しく載っています。
【参考】Upgrading from Version 4 | Font Awesome

FontAwesomeの登録方法

テーマによってFontAwesomeが読み込まれていない場合、自分で読み込むように設定する必要があります。

以前まではCDNを読み込む際のURLは共有のものを使用していましたが、
FontAwesome5からは高速化と自動アップデートの観点からCDNへのURLが個別に発行されています。

そのためFontAwesomeにアカウント登録する必要があります。
必要なのはメールアドレスだけなので簡単です！

外部リンク

【FontAwesome公式サイト】
Start | Font Awesome

Start | Font Awesome

公式サイトのスタートページにアクセス。
自分のメールアドレスを入力し「Send Kit Code」をクリック。

Check Your Email

メールを送ったので確認してね！という画面が出るので、先ほど入力したアドレスのメールを確認する。

メールを確認する

メールが届いているはずです。
「Click to Confirm Your Email Address + Set Things Up」をクリック。

アカウントのパスワードを設定する

FontAwesomeにログインするためのパスワードを入力。
「Set Password ＆ Continue」をクリック。

アンケートページ

「あなたについて少しお尋ねしても良いですか？」というページが出ます。
任意で入力します。
執筆時、入力しなくてもFontAwesomeのCDNのURLが発行可能でしたので「No thanks,Let's skip this step for now.」を押してスキップしました。

ヘッダーに埋め込むコードが発行される

ログインすると「Add Your Kit's Code to a Project」という欄にヘッダーに埋め込むためのコードが表示されていますのでこれを自サイトのヘッダーに埋め込んでFontAwesomeを使えるようにします。

ポイント

SettingsタブでFontAwesomeに関する設定を変更できます。

初期設定でもバージョン4との相互性などの機能がONになっているため問題なく使用できます。気になる方は別記事をご覧ください。

FontAwesome5から使用可能！KITの設定について。

FontAwesomeのCDNを読み込む

自サイトのヘッダーに先ほど発行されたコードを記述してFontAwesomeを読み込み、使用できるようにします。

外観＞テーマエディター＞header.php

Wordpressですとテーマエディターで簡単にヘッダー間に記述することが出来ます。

左メニュー＞外観＞テーマエディター＞テーマヘッダー

と進み「header.php」を開きます。

<head>から</head>までがいわゆるヘッダー間です。
<head>の下あたりに先ほどのコードをコピーします。

親テーマのヘッダーに直接記述する場合はこれでOK！

子テーマのfunctions.phpでCDNを読み込む

先ほどの方法では親テーマの「header.php」を編集してヘッダー間でFontAwesomeのCDNを読み込みました。
子テーマを使用していて「header.php」が存在しない場合にはfunctions.phpにてCDNを読み込ませる方法が良いかと思います。

外観＞テーマエディター＞functions.php

左メニュー＞外観＞テーマエディター＞テーマのための関数

に進み「functions.php」を開きます。

子テーマのfunctions.phpに下記のコードを記述することでヘッダーにCDNを読み込ませることが出来ます。

function fontawesome_enqueue(){
    wp_enqueue_script('fontawesome_script', '発行されたFontAwesomeのCDNのURL'); 
}
add_action('wp_enqueue_scripts','fontawesome_enqueue');

2行目の引数を自分のCDNへのURLに書き換えてください。
コードのsrc=""の中身（https://～.jsまで）を記述すればOK！

もちろん関数名は任意ですので変更しても動作します。

FontAwesome4にしか対応していないテーマでFontAwesome5を使用したい時にもいいかもしれません。
（2回読み込みになるのでVer.5のみを読み込む方法のが良いけど。）