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」の吹き出しが表示されたら、コピー完了です。

コードをペースト

コピーしたコードを挿入したい場所にペーストします。まず、ブロックエディターで、カラムを作り、中にカバーブロックを挿入し、色分けします。今回のDEMOではこのカバー内に、見出しと段落ブロックを挿入し、段落ブロック内に、コードをペーストします。

しかし、ブロックエディターのままではペーストできないので、編集画面を、エディター＞コードエディターに変更します。下記コードの段落タグ(pタグ)内にペーストします。

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

ペーストしたら、ビジュアルエディターに戻します。ブロック内に「user」アイコンが表示されました。

スタイルを整えるため、テキストの配置を左右中央に設定します。タイプグラフィ＞サイズ＞カスタムサイズを設定で、3emに変更します。

他のアイコンも同じように設定したら完成です。

以上で今回の説明は終了です。プラグインといっても、コードを扱うので少し難易度が高くなりますね。しかし、よく使うアイコンをパターンに登録しておけば、今回の作業なしで、いつでも使用することが出来ます。好きなアイコンをまとめて登録しておくと便利です。