![](https://cxg-design.jp/wp-content/uploads/2024/03/25c9d997b68c1c2e72989840e7ff31ca.png)
Font Awesomeプラグインで、いろいろなアイコンを使用
Webサイトのボタンや見出しを作成するときに、文字だけでなくアイコンがあると目が止まり、わかりやすいデザインになります。今回は、「Font Awesome」のアイコンを使用できるプラグインを紹介します。
今回のDEMOは、よく使いそうなアイコンを12種類表示しました。3カラムを4つ縦に並べて作成しており、SPでは1カラムになります。
アイコンのコードをコピー
まず、Font Awesome Webサイトからアイコンのコードをコピーします。
Font Awesomeサイトのトップメニューの「Icons」をクリックします。無料版のアイコンを使用するので、「free and open-source Icons」をクリックします。
アイコンが一覧で表示されます。使用するアイコン、「user」マークをクリックします。モダールウィンドウで設定画面が表示されます。アイコン1つにつき、数点のバリエーションがありますが、今回は、デフォルトのまま、表示されているHTMLコードをクリックします。「Copied」の吹き出しが表示されたら、コピー完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/03/3b12ae58520f6f8c634122ba72c58601.png)
「free and open-source Icons」をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/81ff51406f05924a1e1e6f863f97319a.png)
「user」アイコンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/bc56d4c8a7f82f95fcf309069e713efd.png)
HTMLコードをクリックして、コピー完了。
コードをペースト
コピーしたコードを挿入したい場所にペーストします。まず、ブロックエディターで、カラムを作り、中にカバーブロックを挿入し、色分けします。今回のDEMOではこのカバー内に、見出しと段落ブロックを挿入し、段落ブロック内に、コードをペーストします。
しかし、ブロックエディターのままではペーストできないので、編集画面を、エディター>コードエディターに変更します。下記コードの段落タグ(pタグ)内にペーストします。
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
ペーストしたら、ビジュアルエディターに戻します。ブロック内に「user」アイコンが表示されました。
![](https://cxg-design.jp/wp-content/uploads/2024/03/8a22a70ebfe764bcb0cbc11263c20c3d.png)
3カラム内にカバーを入れ、見出しと段落ブロックを挿入。
![](https://cxg-design.jp/wp-content/uploads/2024/03/6583cba206366ac1a625a366ab0cde0a.png)
エディター>コードエディターに変更
![](https://cxg-design.jp/wp-content/uploads/2024/03/00531b8d45b0bfc4d365e26eddabe353.png)
段落タグ内にペーストして、ビジュアルエディターに戻す。
![](https://cxg-design.jp/wp-content/uploads/2024/03/412682e01038a273f3b96083ed6324ee.png)
アイコンが表示されます。
スタイルを整えるため、テキストの配置を左右中央に設定します。タイプグラフィ>サイズ>カスタムサイズを設定で、3emに変更します。
他のアイコンも同じように設定したら完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/03/b9de1cf667be266fcd334036d9ce996a.png)
テキストの配置を左右中央に設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/9a17404f2c80598bdaf73d80880f318f.png)
タイポグラフィ>サイズ>カスタムサイズを設定で、3emに変更。
![](https://cxg-design.jp/wp-content/uploads/2024/03/0fd9d74927da3f8a1d791e22498b3fc7.png)
他のアイコンも同じように設定
以上で今回の説明は終了です。プラグインといっても、コードを扱うので少し難易度が高くなりますね。しかし、よく使うアイコンをパターンに登録しておけば、今回の作業なしで、いつでも使用することが出来ます。好きなアイコンをまとめて登録しておくと便利です。