Cocoon汎用ブロックの Awesome 4

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

アイコンの記述コード

本文やウィジェットで使用する場合は、下から選んで枠内にマウスオンすると右上に［Copy］が出るので、クリックでコードをコピーできます。
アイコンは２倍のサイズで表示しています。
とは、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 -->