有志の方々の記事を参考にさせていただきました。
WordPress・CMSでFont Awesomeアイコンフォントを導入!最新アイコンが表示しないとき、バージョンアップ方法付き
Font Awesome 5.9を利用する方法
Font Awesome サイトへ
Font Awesome をクリックして下さい。下図のように表示されます。v5.9からメアドでの登録制になりました。
赤枠にメールアドレスを入れて送信後、手続きを完了させて下さい。
取得出来るのは下のような記述になります。
<script src="https://kit.fontawesome.com/キットナンバー.js"></script>
header.php
子テーマの[header.php]の <head> 〜 </head> の間に取得した文字列を追加します。図はCocoonの場合ですが </head> の直前に入れました。
取得した文字列でうまく動作しない場合の記述:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" integrity="sha384-i1LQnF23gykqWXg6jxC2ZbCbUMxyw5gLZY6UiUS98LYV5unm8GWmfkIS6jqJfb4E" crossorigin="anonymous">
この作業でFont Awesomeアイコンフォントはもう使えます。
アイコンの使い方
先ほどの「Font Awesome サイト」の画像の一部です。
赤下線をクリックすると、全部のアイコンが表示されます。
でも実際に使えるのは無料のアイコンなので、下図のように Free をクリックすると無料アイコンだけが表示できます。
下にスクロールして「Load more icons…」で次ページです。
使いたいアイコンがみつかったらクリックすると、画像下のように表示されます。赤枠の文字列をクリックすると、コピーされます。
文字列を編集画面の本文にペーストすれば表示されます。
サンプルの記述:
<i class="fab fa-amazon fa-2x"></i>
<i class="fas fa-bell fa-3x"></i>
<span style="color: Dodgerblue;"><i class="fas fa-check-square"></i></span>
<span style="color: Mediumslateblue;"><i class="far fa-download"></i></span>