「Font Awesome」は、CSSを使ってWebサイト上にアイコンを表示させるオープンソースソフトウェアです。
クラシックエディターからブロックエディターへの移行にともない、このFont Awesomeの使い方が若干変わりました。
ショートコードでアイコンを挿入
一般的なのは、「Font Awesome」のプラグインをインストールし、ショートコードを使って読み込むやり方です。
インストールが終わったら、文書ツールの右端にある矢印のドロップダウンメニューに、「Font Awesome」の項目が追加されます。
あとはビジュアルエディターで任意の場所にカーソルを置き、ここからアイコンを選んで挿入するだけです。
ショートコードが挿入できました。
プレビューを見てみます。
見出しやボタンなどにも同じように、文字の前にショートコードを挿入できます。
＞＞次へ『ショートコードよりもこちらがおススメ』
HTMLでアイコンを挿入
プラグインのショートコードで挿入する方法は、簡単で手早いのが利点です。
ただ、種類が少ないので、しっくりくるアイコンがなかなか見当たらない場合もあります。
その点、Font Awesomeの公式ページには、無料で使えるアイコンが、2023年2月現在で1608個もあるので、この中から好きなアイコンを選び、HTMLで挿入するやり方のほうが やはりおススメです。
使いたいアイコンが決まったら、アイコンのコードをコピーしておきます。
エディターの画面にもどって、文書ツールの右端にある矢印のドロップダウンメニューから、「HTML挿入」を選択します。
HTMLの入力フォームが表示されるので、先ほどコピーしたアイコンのコードを貼り付けます。
エディター上ではこんな感じ。
プレビューを見ると、アイコンがちゃんと表示されていることが分かります。
見出しやボタンも同様にやってみました。
ただ、アイコンと文字との間隔が少し狭いのが気になります。
＞＞次へ『半角スペースを入れる方法』
アイコンと文字のあいだに半角スペースを入れる
ビジュアルエディター上で、矢印の部分にそれぞれ半角スペースを入れます。
アイコンと文字の間に半角スペースが入ることで、見た目ちょうどよい感じになりました。
ただ、このやり方で半角を挿入しても、表示では間隔が変わらない場合があります。
そういうときは、半角スペースを入れた同じ場所に、スペースではなく「 」を挿入するとよいです。
以上、『Font Awesomeのアイコンを挿入する方法』でした。
このサイトで使用しているWordPressテーマは『Cocoon』です。