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

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

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

準備

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

公開されているCDNコードを利用する(Version 5.15.3)

下記のCDNコード(Webfont)をコピーします。

管理画面の外観「テーマエディター」から、「テーマヘッダー(header.php)」のヘッダーセクション(<head>~</head>)にコピーしたコードを貼り付けます。

テーマのヘッダーにCDNコードを貼り付ける

テーマのヘッダーにCDNコードを貼り付ける

これでFont Awesomeを使う準備は完了です。

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

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

Start | Font Awesomeでメールアドレスを入力して、「Send Kit Code」をクリックします。

メールアドレスを入力して、「Sand Kit Code」をクリック

メールアドレスを入力して「Send Kit Code」をクリック

確認メールが届くので、「Click to Confirm Your Email Address + Set Things Up」をクリックします。

メールの「Click to Confirm Your Email Address + Set Things Up」をクリック

メールの「Click to Confirm Your Email Address + Set Things Up」をクリック

ログインパスワードを入力して、「Set Password & Continue」をクリックします。

パスワードを入力して「strongSet Password and Continuestrong」をクリック

パスワードを入力して「strongSet Password and Continue」をクリック

New Password ログインパスワード
Confirm New Password パスワードの確認

名前やFont Awesomeを使い始めた時期を入力できますが、必須ではないので、必要なければ画面下の「No Thanks. Let’s skip this step for now.」をクリックしてスキップします。

画面下の「No Thanks. Let's skip this step for now.」をクリック

画面下の「No Thanks. Let’s skip this step for now.」をクリック

What’s your first name? 名前
How about your last name? 苗字
You first used Font Awesome in… Font Awesomeを使い始めた時期
Got a favorite Font Awesome icon? Font Awesomeのお気に入りアイコン

あなた専用の「キットコード」が表示されるのでコピーします。

表示されたキットコードをコピーする

表示されたキットコードをコピーする

管理画面の外観「テーマエディター」から、「テーマヘッダー(header.php)」のヘッダーセクション(<head>~</head>)にコピーしたコードを貼り付けます。

テーマのヘッダーにキットコードを貼り付ける

テーマのヘッダーにキットコードを貼り付ける

これでFont Awesomeを使う準備は完了です。

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

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

プラグイン「Font Awesome」の設定

プラグイン「Font Awesome」の設定

How are you using Font Awesome? Font Awesomeのファイルを読み込む方法
(登録なしで使えるUse CDNを選択)
Icons 有料版or無料版
(無料のfreeを選択)
Technology フレームワーク
(特殊なスタイリングを使わなければWeb Fontを選択)
Version バージョン
(最新版を選択)
Version 4 Compatibility バージョン4との互換性
(onにするとバージョン4のアイコンも表示できる)

これでFont Awesomeを使う準備は完了です。

プラグインを使用する方法は、通常の使い方以外にショートコードでも表示させることができます。

使い方

HTMLタグをコピーして、アイコンを表示させたい場所に貼り付けるだけです。

アイコンを検索する

アイコン一覧から、「Free(無料)」にチェックを入れてアイコンを検索します。

「Free」にチェックを入れてアイコンを検索

「Free」にチェックを入れてアイコンを検索

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

使いたいアイコンの「iタグ」をコピー

使いたいアイコンの「iタグ」をコピー

基本は「iタグ」を使いますが、「spanタグ」も使えます。

記事にアイコンを挿入する(ブロックエディター)

編集中のブロックメニューから、「HTMLとして編集」をクリックします。

ブロックのメニューから「HTMLとして編集」をクリック

ブロックのメニューから「HTMLとして編集」をクリック

表示させたい場所にコピーしたタグを貼り付けます。

表示させたい場所にコピーしたタグを貼り付ける

コピーしたタグを貼り付ける(ブロックエディター)

他にも、「カスタムHTML」ブロックで追加することもできます。

記事にアイコンを挿入する(クラシックエディター)

記事編集画面で表示させたい場所にコピーしたタグを貼り付けます(テキストエディター)。

コピーしたタグを貼り付ける(テキストエディター)

コピーしたタグを貼り付ける(テキストエディター)

スタイリングの変更

スタイリングを変更したい時は、クラス属性を追加します。

参考:Basic Use | Font Awesome

参考ページ
大きさの変更 Sizing Icons
固定幅 Fixed Width Icons
リストアイコン Icons in a List
回転 Rotating Icons
アニメーション(動く) Animating Icons
配置と枠線 Bordered + Pulled Icons
合成 Stacked Icons
トランスフォーム Power Transforms
マスキング Masking
レイヤリング Layering, Text, & Counters
赤字はSVGでのみ使用可能

フレームワークの切り替えは、キットのSetting「Technology」から変更できます(プラグインを使用している方は、プラグインの設定画面から切り替えることができます)。

「Web Font」と「SVG」の切り替え

「Web Font」と「SVG」の切り替え

切り替えてもコードを貼り直す必要はありませんが、「SVG」から「Web Font」に切り替える際は、一部のスタイリングが機能しなくなるので注意して下さい。

最後に

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

メニューアイコンやCSSの中に組み込む程度なら特に問題ありませんが、記事編集時に使用することが多い方は、作業効率が上がるプラグインの導入も検討してみて下さい。

スポンサーリンク
スポンサーリンク