WordPressにFont Awesomeを導入する方法と使い方

WordPressでFont Awesomeを使う方法をまとめておきます。

準備

いずれかの方法でFont Awesomeを使う準備を完了させて下さい。

個人的には、ブロックエディターにも対応している公式プラグインが一番おすすめです。他の方法は、記事編集画面でアイコンを挿入する際に手間がかかります（CSSに組み込む程度なら問題ない）。

また、最初からFont Awesomeのコードが組み込まれているテーマでは設定不要です。

公式プラグインを追加する

Font Awesomeを追加＆有効化して、管理画面の設定「Font Awesome」から各種設定を行います。

Technologyは「Web Font」推奨なのですが、上手く表示されない時は「SVG」を選択して下さい。

プラグインを追加する方法は、通常の使い方以外にもショートコードが使えます。

公開されているCDNコードを利用する（Version 6.0.0）

下記のCDNコードをコピーして、テーマヘッダーheader.phpに貼り付けます。

公開されているCDNコードを使う方法は、最新バージョンが公開された際に新しく追加されたフォントアイコンが使えないデメリットがあります。また、Font Awesome 4から移行する場合も、一部のアイコンが表示されなくなる可能性があるので注意して下さい（個人的には非推奨）。

登録してキットコードを利用する

Start | Font Awesomeでメールアドレスを入力して、専用のキットコードを入手します。

特に躓くところはないので、手順通り進んで登録を完了させて下さい。

後は、あなた専用のキットコードをテーマヘッダーheader.phpに貼り付けるだけです。

使い方

基本はHTMLタグをコピーして「iタグ」を挿入しますが、プラグインはショートコードも使えます。

iタグで挿入する方法

アイコン一覧から、バージョンを選択してアイコンを検索します（無料版は「Free」にチェックを入れる）。

使いたいアイコンをクリックして、表示された「iタグ」をコピーします。

後はブログの表示させたい場所に貼り付けるだけです。

但し、ブロックエディターでは、そのままiタグを貼り付けることができません。ブロックを「HTMLとして編集」に切り替える必要があるので、かなり使い勝手が悪いです。

ショートコードで挿入する方法

公式プラグインを追加すると、エディターに専用ボタンが追加されます。

ブロックエディターの場合は、編集タブの「Font Awesome icon」ボタンをクリックします。

アイコン一覧が表示されるので、使いたいアイコンを選択します。

記事内にFont Awesomeのショートコードが挿入されます。

クラシックエディターの場合も同様、タグボタンから挿入することができます。

記事内でFont Awesomeを多用する場合は、プラグインの導入推奨です。

わざわざHTML編集に切り替える必要がないので、作業効率が格段に上がります。

スタイリングの変更

スタイリングを変更したい時は、iタグ及びショートコードにクラス属性を追加します。

※赤字はSVGでのみ使用可・青字は有料のPro版でのみ使用可

一部のスタイリングは「SVG」でしか機能しません。途中で「SVG」から「Web Font」に切り替えた場合は、一部のスタイリングが機能しなくなるので注意して下さい。

最後に

僕は普段テキストエディターを使用しているので気にならなかったのですが、ブロックエディターやビジュアルエディターでは、iタグで挿入する方法は使い勝手が悪い気がします（空タグが表示されないため）。

メニューアイコンやCSSの中に組み込む程度なら特に問題ありませんが、記事編集時にFont Awesomeを多用している方は、作業効率が上がる公式プラグインの導入をおすすめします。