ほぼほぼ完成です。

Cocoon汎用ブロックの Awesome 4

Cocoon汎用ブロック(タブ見出しボックス、ラベルボックス、見出しボックス)のアイコンだけなら、Awesome 4 なのでわざわざ Awesome 5 を入れなくても本文中でも使用できます。
タブ見出しボックスを例に紹介します。

アイコンの記述コード

本文やウィジェットで使用する場合は、下から選んで枠内にマウスオンすると右上に[Copy]が出るので、クリックでコードをコピーできます。
アイコンは2倍のサイズで表示しています。
は、Cocoon汎用ブロックでは、わかりやすいように[fab-ok]と[fab-bad]に変更しておられるのだと思います。

 <i class="fa fa-info-circle"></i>
 <i class="fa fa-question-circle"></i>
 <i class="fa fa-exclamation-circle"></i>
 <i class="fa fa-pencil"></i>
 <i class="fa fa-edit"></i>
 <i class="fa fa-comment"></i>
 <i class="fa fa-circle-o"></i> ※ fab-ok
 <i class="fa fa-remove"></i> ※ fab-bad
 <i class="fa fa-thumbs-up"></i>
 <i class="fa fa-thumbs-down"></i>
 <i class="fa fa-check"></i>
 <i class="fa fa-star"></i>
 <i class="fa fa-bell"></i>
 <i class="fa fa-trophy"></i>
 <i class="fa fa-lightbulb"></i>
 <i class="fa fa-graduation-cap"></i>
 <i class="fa fa-bolt"></i>
 <i class="fa fa-bookmark"></i>
 <i class="fa fa-book"></i>
 <i class="fa fa-download"></i>
 <i class="fa fa-coffee"></i>
 <i class="fa fa-amazon"></i>
 <i class="fa fa-user"></i>
 <i class="fa fa-envelope"></i>
 <i class="fa fa-flag"></i>
 <i class="fa fa-ban"></i>
 <i class="fa fa-calendar"></i>
 <i class="fa fa-clock"></i>
 <i class="fa fa-cutlery"></i>
 <i class="fa fa-heart"></i>
 <i class="fa fa-camera"></i>
 <i class="fa fa-search"></i>
 <i class="fa fa-file-text"></i>
 <i class="fa fa-folder"></i>
 <i class="fa fa-tag"></i>
 <i class="fa fa-car"></i>
 <i class="fa fa-truck"></i>
 <i class="fa fa-bicycle"></i>
 <i class="fa fa-motorcycle"></i>
 <i class="fa fa-bus"></i>
 <i class="fa fa-plane"></i>
 <i class="fa fa-train"></i>
 <i class="fa fa-subway"></i>
 <i class="fa fa-taxi"></i>
 <i class="fa fa-ship"></i>
 <i class="fa fa-jpy"></i>
 <i class="fa fa-usd"></i>
 <i class="fa fa-eur"></i>
 <i class="fa fa-btc"></i>
 <i class="fa fa-apple"></i>
 <i class="fa fa-android"></i>
 <i class="fa fa-wordpress"></i>

使用例

fa-info-circle

Amazon
コーヒー
ダウンロード

応用例

Cocoon汎用ブロック(タブ見出しボックス)で色を選択してアイコンなしのままで、本文にも「本文」等と入力しておいて、コードエディターに切り替えて「見出し」の前に半角スペースを入れて候補には無いコード(Windows用)を入力しました。
その後ビジュアルエディターに切り替えると「無効なコンテンツが含まれます」と表示されるので、HTML に変換をクリックして再度コードエディターに切り替えたものが記述例です。「本文」と入れておいたエリアの本文の修正をするだけです。

見出し

Mac があるなら
Windows だって使いたいかも?

記述例
<!-- wp:html -->
<div class="wp-block-cocoon-blocks-tab-caption-box tab-caption-box tcb-yellow block-box"><div class="tab-caption-box-label block-box-label"><span class="tab-caption-box-label-text block-box-label-text"><i class="fa fa-windows"></i> 見出し</span></div><div class="tab-caption-box-content">
<p><i class="fa fa-apple"></i> Mac があるなら<br>
<i class="fa fa-windows"></i> Windows だって使いたいかも?</p>
</div></div>
<!-- /wp:html -->

おまけ

 <i class="fa fa-windows"></i>
 <i class="fa fa-cc-amex"></i>
 <i class="fa fa-cc-diners-club"></i>
 <i class="fa fa-cc-discover"></i>
 <i class="fa fa-cc-jcb"></i>
 <i class="fa fa-cc-mastercard"></i>
 <i class="fa fa-cc-paypal"></i>
 <i class="fa fa-cc-stripe"></i>
 <i class="fa fa-cc-visa"></i>