サイトを見てみたところ、テーブルのセルに対してspanを追加しそのspanに対して添付画像のようなCSSを追加しているようです。
これをカスタマイズで実装するには、結構高度なカスタマイズを必要としますし、◎、◯、×、△毎に挿入するspanも変更しなくてはならず、かなり面倒くさいような気がします。
あまりに大変なカスタマイズは、恐れ入りますがサポートの対象外とさせていただいているので、このヒント以上のことは言えないかもしれません。
もしどうしてもということであれば、カスタマイズ依頼をすれば、実装可能な人はおられるかもしれませんが、それなりに作り込む必要があるので、依頼を受ける場合も大変なような気がします。
https://wp-cocoon.com/cocoon-custom/

投稿者:: @hachi08

CSSでのカスタマイズで実装できたらと思ったのですが、なかなかうまく行かず

どう上手くいかないか、です。

参考のサイトのテーブルは結構面倒な事していますね。
そこまで複雑でなく、CSSのポイントは以下です。
実際に図のように作成できます。

1. 各セル(td)毎にspanで○、×、△のclassを指定
2. classの条件に応じ擬似要素を用い、○、×、△を背景に重ねる

ご提示いただいたサイトは、SWELLの機能で表示しているみたいですね。

以下のデモ動画を見ると、セルの個別背景がブロックエディタで指定できるみたいです。

【SWELL – ver. 2.6.0 アップデート情報】
（「テーブル機能を拡張しました」－「ツールバーに追加した設定項目」－「セルの個別背景」の動画）
https://swell-theme.com/update/9208/?maf=3885_3073951.53798.0..1839062540.1662218707#index_id3

ご提示いただいたサイトを参考にして調べつつ、同じように手作業で真似をすればなんとか…という気はします。

みなさま

いつもお世話になっております。
さっそく、ご回答やアドバイスをいただきましてありがとうございました。

こちらのカスタマイズについて、やや複雑になってしまい、有料サポートをお願いする形になること、承知いたしました。

もう少し自分で格闘してみて、やっぱりどうしてもできない＆実装したいということになりましたら、有償カスタマイズにてご依頼したいと思います。

ご丁寧にご回答をいただきましてありがとうございました。
引き続き何卒よろしくお願い致します。

@hachi08 さん

こういうのはどうでしょうか？

Cocoon 設定 > テンプレートに、テキストエディターで以下のような HTML を書きます。

<div class="hachi-good fa fa-circle-thin" aria-label="おすすめ"></div>

そして、このような CSS を追加します。

td {
  position: relative;
}

:is(.fa, .fas).hachi-good {
  color: red;
  display: grid;
  font-size: 40px;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

そして、ブロックでテーブルを作成します。アイコンを表示したいセルに「テンプレート」を埋め込みます。

@akira 様

こちら、確認が遅くなってしまい大変申し訳ございませんでした。
そして、まさに求めていたもののCSSを教えていただき、ありがとうございました！！

試してみたところ、「z-index:-1;」の記述をなくしたら、いい具合に表示されました。
テーブルセルに背景色を入れていたからですかね？

何はともあれ、おかげさまで、理想通りの表現をすることができました。
これから引き続き利用させていただきます。

この度は、大変ご丁寧にご回答くださりありがとうございました。
今後ともよろしくお願い致します。

度々申し訳ございません。

ちなみに、こちらなのですが、「Font Awesome5」を利用することは可能でしょうか？
試してみたのですが、うまくいかず。。。

難しい場合は大丈夫ですので、もしわかれば教えていただけますと幸いです。
度々お手数をおかけしてしまい申し訳ございませんが、何卒よろしくお願い致します。

全く問題ないです。

あらかじめ、[Cocoon設定]→[全体]→サイトアイコンフォント「Font Awesome 5」選択
赤字の部分をFontawesome.comで確認し、使うアイコンフォントに変更するだけです。

@chu-ya  様

ご返信をありがとうございました。
実は、教えていただいた方法については、質問前に試していたのですが、うまくいかず。。。

検証ツールを確認したところ、CSSがうまく反映されていないようです。
CSSに関しては、特に修正しなくても、「font awsome5」での実装が可能なはずでしょうか。

お手数をおかけしてしまい恐縮ですが、ご確認をいただけますと幸いです。
よろしくお願い致します。

@hachi08 さん

試してみたところ、「z-index:-1;」の記述をなくしたら、いい具合に表示されました。
テーブルセルに背景色を入れていたからですかね？

背景色を考慮していませんでした。ただ、z-index を削除した場合、アイコンが文字の上に表示されます。そのため、td にも z-index を指定するのがいいように思えます。

td {
  position: relative;
  z-index: 0;
}

[class].hachi-good {
  color: red;
  display: grid;
  font-size: 48px;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

※ :is() は良くなかったので属性セレクターに変更しています。尚、Cocoon 設定 > 高速化で「アイコンフォントの非同期読み込みを有効にする」が有効の場合、.hachi-good だけでは優先度が負けます。

Font Awesome 5 の例です。

<div class="hachi-good far fa-circle" aria-label="おすすめ"></div>

Font Awesome 5 のアイコン一覧

SVG タグでも可能です。

<div class="hachi-good">
  <svg role="img" aria-label="おすすめ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <!-- Font Awesome Pro 5.15.4 by @fontawesome -  https://fontawesome.com  License -  https://fontawesome.com/license  (Commercial License) -->
    <path
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" />
  </svg>
</div>

@akira 様

ありがとうございます。
大変詳しく解説してくださり、とても感謝しています。

実際に試してみたのですが、一部のアイコンでは実装ができないのでしょうか？
例えば、「"fa-thin fa-circle"」などで試してみると、fontawsomeが読み込めていないのか、なぜか何も表示されない状況になってしまいます。

しかし、「"far fa-circle"」でやってみると、しっかりと表示されるようです。

そもそもの、私の知識不足なのかもしれませんが、fontawsomeの中の一部のフォントのみにしか使えない機能になるのでしょうか。
少し調べたのですが、分からなかったためご質問させていただきました。

お忙しいところお手数をおかけしてしまい恐縮ですが、ご確認を何卒よろしくお願い致します。

@hachi08 さん

同じアイコンでも Font Awesome のバージョンによって class が違ったはずです。

バージョン 4 の ○

<i class="fa fa-circle-thin"></i>

https://fontawesome.com/v4/icon/circle-thin

バージョン 5 の ○

<i class="far fa-circle"></i>

https://fontawesome.com/v5/icons/circle?s=regular&f=classic

@akira 様

いつもお世話になっております。
詳細なわかりやすいご説明をありがとうございます。

ご指摘の通り、どうやら、一部「ver6.2.0」のものを選んでいたようで、そのアイコンは読み込みができてなかった様子でした。
「ver5.15.4」にして探したところ、ほとんどのアイコンが反映されるようになりました。
ご丁寧にご回答くださりありがとうございます。

しかし、なぜか三角形のアイコンだけ読み込めず、「far fa-triangle」や「fal fa-triangle」を試しているのですが、読み込むことができていません。

こちらについても、ver5にて指定しているはずなのですが、何か間違っていたり、問題があったりするのでしょうか。

何度も何度も申し訳ございませんが、お時間のある時にご確認をいただけますと幸いです。
お手数をおかけしてしまい恐縮ですが、よろしくお願い致します。

@hachi08 さん

バージョン 5 に triangle はあるのですが、このアイコンは有料プランでしか使えないみたいです。そのため、Cocoon に同梱の Font Awesome のスタイルシートに triangle が含まれておらず使えませんでした。

※ アイコン一覧 の左メニューに Free があります。そこにチェックを入れると無料プランで使えるアイコンのみが表示されます。

caret-up の塗りつぶしは無料プランで使えますが、ご希望に沿わないかもしれません。

代替案として、私の頭に浮かんだのがマテリアルアイコンの SVG です。

https://fonts.google.com/icons?icon.query=triangle

SVG をダウンロードし、テンプレートに svg タグを書きます。

<div class="not-good">
  <svg role="img" aria-label="あまり良くない" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
    <path d="M4 40 24.05 8 44 40Zm5.35-3h29.3l-14.6-23.25ZM24 25.35Z" />
  </svg>
</div>

CSS は、ほんのわずかに違います。

td {
  position: relative;
  z-index: 0;
}

.not-good {
  display: grid;
  inset: 0;
  opacity: 0.4;
  place-content: center;
  position: absolute;
  z-index: -1;
}

.not-good svg {
  fill: red;
  height: 60px;
  width: 60px;
}

添付画像は、その結果です。

マテリアルアイコンも Web フォントとして使えますが、サイトの表示速度の観点から SVG タグでの使用がおすすめです。SVG スプライトを作ってもいいと思います。

@hachi08 さん
何もFontawesomeである必要もなく。
フォントを揃えるなら、ＭＳ Ｐゴシックの◎○△×で十分だと思いますが。

@akira 様

いつもお世話になっております。
さっそく、ご回答をくださりありがとうございました。

確認をしたところ、理想通りの表現ができるようになり、満足しております。
何から何まで、大変ご丁寧に教えていただきまして本当にありがとうございました。

動作確認をしても特に問題はなさそうでしたので、
こちらにて質問内容は解決としていただいて大丈夫そうです。

分かりやすいご説明を、本当にありがとうございました。

また、コメントを下さった

@yhira　様
@chu-ya　様
@mk2_mk2　様

この度は貴重なご意見やご回答をいただきましてありがとうございました。

今後とも引き続きCocoonを愛用させていただきますので、何卒よろしくお願い致します。