Webサイトのデザインでアイコン素材を使用したいシーンはよくあります。様々なWebアイコンフォントサービスがありますが、最も人気なサービスがFont Awesomeです。
この記事では、WordPressのサイトでFont Awesomeを表示するための方法を解説しています。
FontAwesomeって何?
Font Awesomeとは、無料で利用できるWebアイコンフォントサービスです。
約1,500種類のアイコンを無料で利用することができ、その便利さから様々なWebサイトがFont Awesomeを使ってアイコンを表示しています。
Font Awesome
WordPressでFont Awesomeを利用する方法
では、WordPressでFont Awesomeを利用する方法をご紹介していきます。
大きく分けて、下記の2つのステップがあります。
- ファイルを読み込む
- アイコンを表示する
ファイルを読み込んでアイコンを表示するだけです!シンプルですね!
ではそれぞれのステップを詳しく見ていきましょう。
1. ファイルを読み込む
WordPressにFont Awesomeを利用するには、まずCDNを使ってFont Awesomeのファイルを読み込みます。
head
タグ内に下記のコードを貼り付けましょう。
1 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> |
ファイルをサーバーにアップロードしたり、JavaScriptを使って読み込む方法もありますが、CSSファイルをCDNから読み込む方法が一番手軽です。
2. アイコンを表示する
アイコンをHTMLで表示する場合は、下記のようなコードを投稿の本文やテーマファイルに記述します。
1 2 3 | <i class="fas fa-angry"></i> <i class="fas fa-baby"></i> <i class="far fa-bookmark"></i> |
そうすると、下記のようなアイコンフォントが表示されます。
また、下記のようにCSSのbefore属性やafter属性で表示するアイコンを指定してアイコンを表示することもできます。
1 | <div class="fa-icon"></div> |
1 2 3 4 5 | .fa-icon:before { content:'\f02e'; font-family:'Font Awesome 5 Free'; font-weight:900; } |
見出しにFont Awesomeを使用する
下記のように、WordPressの投稿の見出しのデザインにFont Awesomeを使用することも可能です。
h2
タグに上記のデザインを適用したい場合は、CSSに下記のように記述します。
1 2 3 4 5 6 7 | h2::before { content: '\f27a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 0.5em; color: #FFA556; } |
リストにFont Awesomeを使用する
リストを表示する時に、下記のようにリストの見出しにFont Awesomeを使用することができます。
上記のデザインに変更するCSSは、下記のようになります。
1 2 3 4 5 6 7 8 9 10 11 | ul li { list-style:none; } ul li::before { content: '\f0da'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 0.5em; color: #ffa556; } |