Webサイトのデザインでアイコン素材を使用したいシーンはよくあります。様々なWebアイコンフォントサービスがありますが、最も人気なサービスがFont Awesomeです。

この記事では、WordPressのサイトでFont Awesomeを表示するための方法を解説しています。

FontAwesomeって何？

Font Awesomeとは、無料で利用できるWebアイコンフォントサービスです。

約1,500種類のアイコンを無料で利用することができ、その便利さから様々なWebサイトがFont Awesomeを使ってアイコンを表示しています。

WordPressでFont Awesomeを利用する方法

では、WordPressでFont Awesomeを利用する方法をご紹介していきます。

大きく分けて、下記の2つのステップがあります。

ファイルを読み込んでアイコンを表示するだけです！シンプルですね！

ではそれぞれのステップを詳しく見ていきましょう。

1. ファイルを読み込む

WordPressにFont Awesomeを利用するには、まずCDNを使ってFont Awesomeのファイルを読み込みます。

headタグ内に下記のコードを貼り付けましょう。

ファイルをサーバーにアップロードしたり、JavaScriptを使って読み込む方法もありますが、CSSファイルをCDNから読み込む方法が一番手軽です。

2. アイコンを表示する

アイコンをHTMLで表示する場合は、下記のようなコードを投稿の本文やテーマファイルに記述します。

そうすると、下記のようなアイコンフォントが表示されます。

また、下記のようにCSSのbefore属性やafter属性で表示するアイコンを指定してアイコンを表示することもできます。

見出しにFont Awesomeを使用する

下記のように、WordPressの投稿の見出しのデザインにFont Awesomeを使用することも可能です。

h2タグに上記のデザインを適用したい場合は、CSSに下記のように記述します。

リストにFont Awesomeを使用する

リストを表示する時に、下記のようにリストの見出しにFont Awesomeを使用することができます。

上記のデザインに変更するCSSは、下記のようになります。

関連記事