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