「Font Awesome」は、CSSを使ってWebサイト上にアイコンを表示させるオープンソースソフトウェアです。
クラシックエディターからブロックエディターへの移行にともない、このFont Awesomeの使い方が若干変わりました。
ショートコードでアイコンを挿入
一般的なのは、「Font Awesome」のプラグインをインストールし、ショートコードを使って読み込むやり方です。

インストールが終わったら、文書ツールの右端にある矢印のドロップダウンメニューに、「Font Awesome」の項目が追加されます。

あとはビジュアルエディターで任意の場所にカーソルを置き、ここからアイコンを選んで挿入するだけです。

ショートコードが挿入できました。

プレビューを見てみます。

見出しやボタンなどにも同じように、文字の前にショートコードを挿入できます。

>>次へ『ショートコードよりもこちらがおススメ』
HTMLでアイコンを挿入
プラグインのショートコードで挿入する方法は、簡単で手早いのが利点です。
ただ、種類が少ないので、しっくりくるアイコンがなかなか見当たらない場合もあります。
その点、Font Awesomeの公式ページには、無料で使えるアイコンが、2023年2月現在で1608個もあるので、この中から好きなアイコンを選び、HTMLで挿入するやり方のほうが やはりおススメです。

使いたいアイコンが決まったら、アイコンのコードをコピーしておきます。

エディターの画面にもどって、文書ツールの右端にある矢印のドロップダウンメニューから、「HTML挿入」を選択します。

HTMLの入力フォームが表示されるので、先ほどコピーしたアイコンのコードを貼り付けます。

エディター上ではこんな感じ。

プレビューを見ると、アイコンがちゃんと表示されていることが分かります。

見出しやボタンも同様にやってみました。
ただ、アイコンと文字との間隔が少し狭いのが気になります。

>>次へ『半角スペースを入れる方法』
アイコンと文字のあいだに半角スペースを入れる
ビジュアルエディター上で、矢印の部分にそれぞれ半角スペースを入れます。

アイコンと文字の間に半角スペースが入ることで、見た目ちょうどよい感じになりました。

ただ、このやり方で半角を挿入しても、表示では間隔が変わらない場合があります。
そういうときは、半角スペースを入れた同じ場所に、スペースではなく「 」を挿入するとよいです。

以上、『Font Awesomeのアイコンを挿入する方法』でした。
このサイトで使用しているWordPressテーマは『Cocoon』です。