【簡単】FontAwesomeの使い方とWordPressへの導入方法。登録方法からCDNの読み込み方法までまとめ!

FontAwesomeの対応確認3
FontAwesomeの導入方法と使い方をまとめました。簡単にアイコンを使うことが出来るので、Wordpressを使ったサイトによく使用されています。
読み方は「フォントオーサム」とされています。

現在バージョン5が主流ですが、バージョン4についてもほとんど同じ要領で使用することが可能です。
なお、バージョン6は2021年に公開予定のようです。

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

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

FontAwesomeの使い方

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

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

スタンダードで簡単な使い方は1の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の対応確認1

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

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

FontAwesomeの対応確認2

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

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

FontAwesomeの対応確認3

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

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

バージョン4と5の違い

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

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

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

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

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

Prefix(Class名)アイコンスタイルバージョン料金
fa-4無料
fasSolid5無料
fabBrands5無料
farRegular5有料
falLight5有料
fadDoutone5有料

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

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

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

FontAwesomeの登録方法

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

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

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

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

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

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

FontAwesomeの登録方法3

メールを確認する

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

FontAwesomeの登録方法4

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

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

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

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

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

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

FontAwesomeのCDNを読み込む

自サイトのヘッダーに先ほど発行されたコードを記述してFontAwesomeを読み込み、使用できるようにします。
FontAwesomeのCDN読み込み_head間WordPressですとテーマエディターで簡単にヘッダー間に記述することが出来ます。

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

と進み「header.php」を開きます。
<head>から</head>までがいわゆるヘッダー間です。
<head>の下あたりに先ほどのコードをコピーします。

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

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

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

FreeとProの違い

FontAwesomeは無料で使用できますが、有料のサブスクリプションも用意されています。
重要な項目の簡単な早見表を作りました。(2021年4.10時点)

無料(Free)有料(Pro)
料金無料月額99$
アイコン数1,609個7,865個
使用制限1万回/月100万回/月
Kit数制限1個20個

Kitを使用する場合、無料版ですとアイコンの表示回数が毎月1万ビューまでと制限があるようですね。
その他詳しくは公式ページをご確認ください。

【公式ページ】Plans & Pricing | Font Awesome

アイコンのダウンロード先

最後にFontAwesomeのアイコンを検索するところをリンクしておきます。

■FontAwesome5以降(無料のみ)
Free Icons | Font Awesome
■FontAwesome4
Font Awesome Icons

使用したいアイコンをクリックして

<i class="ほげほげ"></i>

をコピーしてアイコンを表示したいところにこのまま貼り付ければアイコンが表示されるはずです!

まとめ

FontAwesomeをWordpressに導入する方法と簡単な使い方のまとめでした。

序盤が長くなってしまって見にくかったかもしれませんね…
アイコンの大きさの変更や、動きを付ける方法は長くなるので別の記事でご紹介します。

FontAwesomeのアイコンをカスタムする方法について執筆しました。
【関連記事】FontAwesomeカスタム!アイコンサイズを変更したり回転させたり… FontAwesomeの加工方法とサンプル集。

-サイト構築

© 2021 ソロ学