Font Awesome はアイコンに特化したフォントです。
かなりの量のアイコンがCDN (コンテンツ・デリバリー・ネットワーク)で使えます。
WordPress なら、プラグインが圧倒的に使いやすいっす。
Font Awesome のプラグインが使いやすい。
Contents
プラグインを導入
プラグイン出てないのかな?って思って検索したところ、公式のプラグインがありました
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-10.png)
※WordPress のバージョンが上がった直後でインストールしたので、
「使用中のWP バージョンで未検証」になっていますが、毎回すぐに更新されます。
基本的には、インストールして有効化するだけです。
設定
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-183.png)
設定する項目について。
バージョンの問題や、他のAwesome プラグインとの競合などを解決する機能も付いている様子。
さらっと項目に目を通して、項目が刺さった人は設定しましょう。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-11-1024x479.png)
「Pro」アイコンを使うには、サブスクリプション購入が要るみたいです。
![](https://zapping.beccou.com/wp-content/uploads/2021/07/image-75.png)
プラグイン導入後。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-36-edited.png)
「 」ボタンからアイコンが挿入できるようになりました。
さすがプラグイン。すごい便利。
アイコンを挿入する手順
矢印のアイコン >「 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-165.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
検索結果から、挿入したいアイコンをクリックします。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-166.png)
![](https://zapping.beccou.com/wp-content/uploads/2022/04/image-295.png)
コードが挿入されます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-169.png)
プレビューすると、ちゃんとアイコンになっているのが確認できます。
linux のアイコン→ ← 小さいけど、 こんな感じです。
クラスを追加して表示をカスタマイズ
クラスを追加する事で、アイコンを回転、反転などが出来ます。便利です。
再現したいアイコンと向きが違うなーって場合は「クラス」を使って調整します。
色の変更
クラスではないですが、
「フォント」なので文字フォントみたいに色指定すれば、好きな色に変更できます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-180.png)
linux のアイコン 色指定しただけ。→
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-184.png)
サイズ変更(プラグインで挿入の場合)
「fa-n(倍率)x」
アイコン名の後ろに「半角スペース」を入れてからサイズ指定を入れます。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-175.png)
2倍 fa-2x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-171.png)
5倍 fa-5x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-172.png)
10倍 fa-10x →
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-173.png)
指定できるサイズについては下記を参照。
https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons
回転させる
「fa-rotate-n(角度: 90 度ずつ )」
クラスを下記の様に追記します。
5倍 かつ、90 度回転。→
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-176.png)
水平反転、垂直反転
「fa-flip-horizontal(水平)」
「fa-flip-vertical(垂直)」
5倍 かつ、水平に反転。→
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-177.png)
囲む
「fa-border」
5倍 かつ、囲む。→
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-178.png)
周り込み
「fa-pull-left / right」
フロートみたいなイメージです。
←5倍 かつ、回り込む。 りなくす最高。 りなくす最高。 りなくす最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 あいこん最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。 りなくす最高。
![](https://zapping.beccou.com/wp-content/uploads/2021/08/image-179-1024x31.png)
アニメーションのクラス
驚愕のアニメーションクラス
回転させる「spin」のクラスは使えるようです。
←2倍かつ、回転。
![](https://zapping.beccou.com/wp-content/uploads/2021/10/image-193.png)
参考サイト
【最新版】Font Awesome 5でアイコンを表示させよう!
ピンバック: 【WordPress】吹き出しをビジュアル・エディターだけで作る。 – .zapping