WordPressで「Font Awesome」を使う方法をまとめておきます。
Contents
準備
いずれかの方法でFont Awesomeを使う準備を完了させて下さい。
公開されているCDNコードを利用する（Version 5.15.3）
下記のCDNコード（Webfont）をコピーします。
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"> |
管理画面の外観「テーマエディター」から、「テーマヘッダー（header.php）」のヘッダーセクション（<head>～</head>）にコピーしたコードを貼り付けます。
テーマのヘッダーにCDNコードを貼り付ける
これでFont Awesomeを使う準備は完了です。
但し、CDNコードを使う方法は、最新バージョンが公開された際に新しく追加されたフォントアイコンが使えません。また、Font Awesome 4から移行する場合もCDNコードでは一部のアイコンが表示されなくなるので注意して下さい（個人的には非推奨）。
登録してキットコードを利用する
Start | Font Awesomeでメールアドレスを入力して、「Send Kit Code」をクリックします。
メールアドレスを入力して「Send Kit Code」をクリック
確認メールが届くので、「Click to Confirm Your Email Address + Set Things Up」をクリックします。
メールの「Click to Confirm Your Email Address + Set Things Up」をクリック
ログインパスワードを入力して、「Set Password & Continue」をクリックします。
パスワードを入力して「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.」をクリック
| 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」の設定
| 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」にチェックを入れてアイコンを検索
使いたいアイコンをクリックして、表示された「iタグ」をコピーします。
|
1 |
<i class="fab fa-wordpress"></i> |
使いたいアイコンの「iタグ」をコピー
基本は「iタグ」を使いますが、「spanタグ」も使えます。
記事にアイコンを挿入する（ブロックエディター）
編集中のブロックメニューから、「HTMLとして編集」をクリックします。
ブロックのメニューから「HTMLとして編集」をクリック
表示させたい場所にコピーしたタグを貼り付けます。
コピーしたタグを貼り付ける（ブロックエディター）
他にも、「カスタムHTML」ブロックで追加することもできます。
記事にアイコンを挿入する（クラシックエディター）
記事編集画面で表示させたい場所にコピーしたタグを貼り付けます（テキストエディター）。
コピーしたタグを貼り付ける（テキストエディター）
スタイリングの変更
スタイリングを変更したい時は、クラス属性を追加します。
| 参考ページ | |
|---|---|
| 大きさの変更 | Sizing Icons |
| 固定幅 | Fixed Width Icons |
| リストアイコン | Icons in a List |
| 回転 | Rotating Icons |
| アニメーション（動く） | Animating Icons |
| 配置と枠線 | Bordered + Pulled Icons |
| 合成 | Stacked Icons |
| トランスフォーム | Power Transforms |
| マスキング | Masking |
| レイヤリング | Layering, Text, & Counters |
フレームワークの切り替えは、キットのSetting「Technology」から変更できます（プラグインを使用している方は、プラグインの設定画面から切り替えることができます）。
「Web Font」と「SVG」の切り替え
切り替えてもコードを貼り直す必要はありませんが、「SVG」から「Web Font」に切り替える際は、一部のスタイリングが機能しなくなるので注意して下さい。
最後に
僕は普段テキストエディターを使用しているので気にならなかったのですが、ブロックエディターやビジュアルエディターでは若干使い勝手が悪い気がします（空タグが表示されないため）。
メニューアイコンやCSSの中に組み込む程度なら特に問題ありませんが、記事編集時に使用することが多い方は、作業効率が上がるプラグインの導入も検討してみて下さい。
最近のコメント