簡単に、「アイコンボックス」ブロックのアイコンを変更する方法

はじめに

「アイコンボックス」ブロックのデザインは、スタイル設定から簡単に選択できます。

しかし、用意されているプリセットだけでは「どうしてもイメージ通りのアイコンが見つからない」という場面もあります。

そこで、「アイコンボックス」ブロックのアイコンを、CSSを使わずスタイル設定にないアイコンに変更します。

この記事では、この方法について説明します。

実装手順

以下の手順でアイコンを変更します。

1. 「アイコンボックス」ブロックを配置します。
2. 高度な設定→追加CSSクラスにFont AwesomeのCSSクラスを入力します。

<i class="fas fa-wrench"></i>

完成イメージ

「アイコンボックス」ブロックの中には、変更できないスタイルもあるのでご了承ください。
また、Gutenbergエディター上では、設定したアイコンが反映されないことがあります。

アイコンボックス

アイコンを、fa-wrenchに変更します。

段落

「段落」ブロックのスタイルも、アイコンボックスと同様の手順でアイコンを変更できます。
アイコンをfa-bullhornに変更します。

【変更可能】情報

【変更可能】質問

【変更不可】アラート

【変更不可】メモ

【変更不可】コメント

【変更不可】OK

【変更可能】NG

【変更可能】グッド

【変更可能】バッド

【変更可能】プロフィール

さいごに

今回紹介した方法を使えば、CSSを使わずにアイコンボックスのアイコンを簡単に変更することができます。
Gutenbergエディターの使い方を工夫するだけで、アイコンを自由に変更できます。