Font Awesome はアイコンに特化したフォントです。かなりな量のアイコンがフリーで使えます。
特殊なフォントならインストールしないとダメじゃんと思ったのですが、CDN (コンテンツ・デリバリー・ネットワーク)なのでインストール不要でした。
使い方はとてもシンプルで、対応したタグを貼り付ければ、アイコンが表示される感じですが、WP の場合どうやって使えばいいかイメージできなかったので、いろいろと試してみた事をまとめました。
アイコンをWordPress の記事で使いたい。
「Font Awesome 5」
Contents
HTML で使う場合。
使いたいアイコンを見つける。
Font Awesome のサイトにて、使いたいアイコンを見つけます。
有料版と、無償版があるので注意。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-1024x682.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
「Icons」をクリック
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-12.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
移動先で「Free」にチェックを入れると、フリーのアイコンのみに絞り込めます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-2-1024x682.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
一覧から使いたいアイコンをクリックすると、クリックしたアイコンの詳細ページに移動します。
このページの左上に、Font Awesome 5 を使うのに必要なコードが書いてあります。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-5.png)
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-4.png)
「HTMLで使う」ページにタグを貼り付ければ、アイコンが表示されます。
「CSS で使う」このコードで表示するアイコンを指定します。
とりあえずは「HTMLで使う」方のコードをコピーして、ページに貼り付ければアイコンが表示されます。
WordPress の場合、どうやってタグをHTML 内に記載する?
コピーしたタグをHTML で貼り付けるわけですが、ちょっと悩んだのは、その貼り付ける方法。
ビュジュアルエディターを使っているので、「どうやって?」っていう感じです。
下記のようにHTML を直接書き込めるブロックを使うか、HTML として編集するか。
以下のどの方法でも、WEBにアップした時(プレビューで確認。)では正常にアイコンが表示されましたが、
ビジュアルエディター上ではやや難がありました。
ショートコードを使う。
プレビューがない。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-8.png)
カスタムHTML ブロックを使う。
プレビューはあるが、表示されない。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-9.png)
HTML として編集する。
ビジュアルエディター上で唯一プレビューが表示された(歪んでるけど)。
アイコンの使用方法によると思うけど、ちょっとめんどくさい。
段落に文字を追加 →HTML として編集
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-6.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
※P タグに挟まないと、めんどくさいことになる。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-7.png)
プレビューが表示されないのは残念ですが、今のところ「カスタムHTML」が扱いやすいと思いました。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-16.png)
![](https://zapping.beccou.com/wp-content/uploads/2021/07/allow1.png)
サイズを変更
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-13.png)
希望のサイズを確認します。(マウスカーソルを合わせるとポップアップします。)
アイコンの詳細ページで確認できます。
アイコン名の後ろに「fa-nx」(※n は倍率)を挿入します。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-15.png)
![](https://zapping.beccou.com/wp-content/uploads/2021/07/allow1.png)
【CSS】追加CSS で使用する。
追加CSS でクラスを設定します。
CSS で使用したい場合の例。
![](https://zapping.beccou.com/wp-content/uploads/2022/07/image-77.png)
アイコンの呼び出しコードを検索。
下記のサイトにて、アイコンを検索します。
フリーである程度使えますが、登録していないと使えないフリーアイコンもあるので、いろいろ試してみてください。
フリーにチェックを入れて、バージョンを5 以下のものを選べばよっぽどいいと思います。
![](https://zapping.beccou.com/wp-content/uploads/2022/07/image-80-1024x723.jpg)
アイコンをクリックすると詳細情報が表示されますので、コードをコピーします。
![](https://zapping.beccou.com/wp-content/uploads/2022/07/image-80-1024x659.png)
CSS を設定
下記の様に追加CSS を設定してアイコンを適用します。
最後の「content」のところでアイコンを指定しています。
※調べたコードに「\」を追加して挿入。
サイズは「font-size」で調整しています。
/* ---------------------------- */
.icon-test:before {
font-family: "Font Awesome 5 Free";
font-weight:900;
font-size:1.5em;
margin-right:15px;
content: "\f2bd";
}
プラグインを導入
公式のプラグインがあったので、導入してみる。
公式だし、なんかPro も使えるとか書いてあるし。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-10.png)
インストールして有効化するだけとあるので、インストールして有効化。
設定画面
設定画面。
「Pro」アイコンを使うには、サブスクリプションが要るみたいですね。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-11-1024x479.png)
バージョンの問題や、他のAwesome プラグインとの競合などを解決する機能も付いている様子。
アイコン挿入機能が便利。
←このボタンからアイコンが挿入できるようになりました。
さすがプラグイン。すごい便利。
矢印のアイコン >「 Font Awesome Icon」をクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-36.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
サーチ欄にキーワードを入力して検索。
挿入したいアイコンをクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-37.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
コードが挿入されます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-30.png)
![](https://zapping.beccou.com/wp-content/uploads/2021/07/allow1.png)
プレビューするとこんな感じです。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-31.png)
サイズ変更(プラグインで挿入の場合)
アイコン名の後ろに「半角スペース」を入れてからサイズ指定を入れます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-32.png)
通常 →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-38.png)
2倍 fa-2x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-33.png)
5倍 fa-5x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-34.png)
10倍 fa-10x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-35.png)
指定できるサイズについては下記を参照。
https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons
参考サイト
【最新版】Font Awesome 5でアイコンを表示させよう!
ピンバック: 【WordPress】吹き出しをビジュアル・エディターだけで作る。 – .zapping