WordPressでFont Awesomeを使う方法をまとめておきます。
準備
いずれかの方法でFont Awesomeを使う準備を完了させて下さい。
個人的には、ブロックエディターにも対応している公式プラグインが一番おすすめです。他の方法は、記事編集画面でアイコンを挿入する際に手間がかかります(CSSに組み込む程度なら問題ない)。
また、最初から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のアイコンも表示できる) |
Technologyは「Web Font」推奨なのですが、上手く表示されない時は「SVG」を選択して下さい。
プラグインを追加する方法は、通常の使い方以外にもショートコードが使えます。
公開されているCDNコードを利用する(Version 6.2.1)
下記のCDNコードをコピーして、テーマヘッダーheader.php
に貼り付けます。
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.1/css/all.css"> |
公開されているCDNコードを使う方法は、最新バージョンが公開された際に新しく追加されたフォントアイコンが使えないデメリットがあります。また、Font Awesome 4から移行する場合も、一部のアイコンが表示されなくなる可能性があるので注意して下さい(個人的には非推奨)。
登録してキットコードを利用する
Start | Font Awesomeでメールアドレスを入力して、専用のキットコードを入手します。
特に躓くところはないので、手順通り進んで登録を完了させて下さい。
後は、あなた専用のキットコードをテーマヘッダーheader.php
に貼り付けるだけです。
使い方
基本はHTMLタグをコピーして「iタグ」を挿入しますが、プラグインはショートコードも使えます。
iタグで挿入する方法
アイコン検索から、使いたいアイコンを検索します(無料版の方は「Free」にチェックを入れる)。
使いたいアイコンをクリックして、表示された「iタグ」をコピーします。
1 |
<i class="fa-brands fa-wordpress"></i> |
後はブログの表示させたい場所に貼り付けるだけです。
但し、ブロックエディターでは、そのままiタグを貼り付けることができません。ブロックを「HTMLとして編集」に切り替える必要があるので、かなり使い勝手が悪いです。
ショートコードで挿入する方法
公式プラグインを追加すると、エディターに専用ボタンが追加されます。
ブロックエディターの場合は、編集タブの「Font Awesome icon」ボタンをクリックします。
アイコン一覧が表示されるので、使いたいアイコンを選択します。
記事内にFont Awesomeのショートコードが挿入されます。
クラシックエディターの場合も同様、タグボタンから挿入することができます。
記事内でFont Awesomeを多用する場合は、プラグインの導入推奨です。
わざわざHTML編集に切り替える必要がないので、作業効率が格段に上がります。
スタイリングの変更
スタイリングを変更したい時は、iタグ及びショートコードにクラス属性を追加します。
参考ページ | |
---|---|
大きさの変更 | Sizing Icons |
固定幅 | Fixed Width Icons |
リストアイコン | Icons in a List |
回転 | Rotate Icons |
アニメーション(動く) | Animating Icons |
配置と枠線 | Bordered & Pulled Icons |
合成 | Stacking Icons |
トランスフォーム | Power Transforms |
マスキング | Masking |
レイヤリング | Layering Text & Counters |
テキストカウンターの階層化 | Layering Text & Counters |
2色カラー | Duotone Icons |
※赤字はSVGでのみ使用可・青字は有料のPro版でのみ使用可
一部のスタイリングは「SVG」でしか機能しません。途中で「SVG」から「Web Font」に切り替えた場合は、一部のスタイリングが機能しなくなるので注意して下さい。
最後に
僕は普段テキストエディターを使用しているので気にならなかったのですが、ブロックエディターやビジュアルエディターでは、iタグで挿入する方法は使い勝手が悪い気がします(空タグが表示されないため)。
メニューアイコンやCSSの中に組み込む程度なら特に問題ありませんが、記事編集時にFont Awesomeを多用している方は、作業効率が上がる公式プラグインの導入をおすすめします。
コメント