ほぼほぼ完成です。

Font Awesomeアイコンフォント

かう様の以下の記事を参考にさせていただきました。
WordPress・CMSでFont Awesomeアイコンフォントを導入!最新アイコンが表示しないとき、バージョンアップ方法付き
 

Font Awesome サイトへ

Font Awesome をクリックして下さい。下図のように表示されます。赤枠のマークをクリックして文字列をコピーします。

 

header.php

子テーマの[header.php]の <head> 〜 </head> の間にコピーした文字列を追加します。図はCocoonの場合ですが </head> の直前に入れました。

 
コピーした文字列:v5.8.2

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" 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>

 

Font Awesome 4

Font Awesome 5 の場合は下のように、fas fa-●●●far fa-●●●fab fa-●●●となります。

 <i class="fas fa-check-square"></i>

 
Font Awesome 4 の場合は、下のように、fasfarfabfaに変更すると表示されるものもあります。

 <i class="fa fa-check-square"></i>

Cocoonテーマでは、デフォルトで Font Awesome 4 を入れて下さっているからです。
Font Awesome 5 で追加になったものは Font Awesome 4 では表示されません。

わたしが試した限りでは、ウィジェットに使う場合は、Font Awesome 4 しか表示されませんでした。