WordPressサイトにWEBアイコン【Font Awesome】を導入しよう
【Font Awesome】は、シンプルなデザインの様々アイコンをWebフォントという形式で利用できるようにしたサービスです。各種アイコンがWEBフォントとして利用することができますので、サイズやカラーなどをCSSだけで調整することができます。
WEBサイトを制作していてアイコンを使用したいとき、かなりお世話になるサービスです。
様々なアイコンが配布されていますので、ほしいアイコンがほとんど見つかります。
使い方も簡単ですので、今回のコンテンツを参考にして【Font Awesome】を使ってみてください。
【Font Awesome】を導入する手順
下準備
まず、サイト上に【Font Awesome】のアイコンが表示できるように下準備を行います。
この下準備をしておかなければ、後述する方法でアイコンを設置して正常に表示されません。
下準備の方法は2通りあります。
・必要なファイルをサーバーにアップロードする方法
・CDNを利用する方法
今回は、ファイルのダウンロードやアップロードの必要が無く、コピペだけで準備ができる「CDNを利用する方法」を中心に解説していきます。
やり方は簡単です。
WordPressの管理画面から、header.phpの編集画面を開きます。
管理画面のメニューから【外観】⇒【テーマの編集】⇒【header.php】と進んでください。
編集画面が開いたら【<head>】内に以下のコードをコピペして保存します。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
下準備はこれで完了です。
アイコンをサイト上に表示させる方法
下準備が整ったら、アイコンをサイト上に表示させて見ましょう。
こちらの作業も簡単で、基本的にコピペだけで作業が完了します。
まず、公式サイト【Font Awesome】にアクセスしてください。

上記画像の赤枠部分にある【Icons】をクリックします。

上記の画像の様に、使用できるアイコンがズラリと表示されます。
表示されているアイコンの中からお好きなアイコンを見つけてください。
アイコンを選ぶときは、1点だけ注意が必要です。
下記の2つのアイコンを見比べてください。

左側のアイコンは濃く表示され、右側のアイコンは薄く表示されています。
無料で利用できるアイコンは、左側の濃く表示されているアイコンです。

設置したいアイコンが見つかったら、そのアイコンをクリックします。

遷移したページの中を確認すると、HTMLコードが表示されているのが分ります。
上記の画像でいえば赤枠の部分です。
このHTMLコードをコピーしてください。
HTMLコードをクリックすると自動的にコピーできます。
あとは、サイト上のアイコンを設置したい箇所にコピーしたHTMLを貼り付ければOKです。
例えば、投稿内に設置したいのであれば、その投稿の編集画面から貼り付けてください。
下記の画像は試しにTwitterのアイコンを表示させてみました。

サイトを確認してみると、上記のようにアイコンが表示されているのが分かるかと思います。
いかがでしたでしょうか?
コピペだけで簡単でしたね。
WEBアイコンを装飾してみる
アイコンのサイズを変更する
アイコンを設置するHTMLにデフォルトで用意されているスタイルを追加する事で、アイコンのサイズを変更することができます。
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>fa-lgの場合
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>fa-2xの場合
<i class="fa fa-twitter fa-3x" aria-hidden="true"></i>fa-3xの場合
<i class="fa fa-twitter fa-4x" aria-hidden="true"></i>fa-4xの場合
<i class="fa fa-twitter fa-5x" aria-hidden="true"></i>fa-5xの場合
上記の様にclassに【fa-lg】【fa-2x】【fa-3x】【fa-4x】【fa-5x】を加えることで、以下のようにアイコンのサイズを変更することができます。
fa-lgの場合
fa-2xの場合
fa-3xの場合
fa-4xの場合
fa-5xの場合
アイコンの幅を変更する
アイコンは横幅が統一されているわけではありませんので、リストなどで複数のアイコンを使うとテキストの開始位置がずれ、ちぐはぐな感じになってしまいます。
ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。
ちょっと分かりにくいかもしれませんが、よーく見るとテキストの開始位置がずれているのが分かりますね。
このずれを解消するためには、classに【fa-fw】を加えてやりましょう。
<i class="fab fa-twitter fa-fw"></i>ここにテキストが表示されます。
<i class="fas fa-archway fa-fw"></i>ここにテキストが表示されます。
<i class="fab fa-apple fa-fw"></i>ここにテキストが表示されます。
classに【fa-fw】を加えてやると、以下のようにテキストの開始位置がずれなくなります。
ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。
アイコンを回転させる
classに【fa-spin】を追加することで、アイコンを回転させることができます。
<i class=”fab fa-twitter fa-spin”></i>ここにテキストが表示されます。
<i class=”fas fa-archway fa-spin”></i>ここにテキストが表示されます。
<i class=”fab fa-apple fa-spin”></i>ここにテキストが表示されます。
以下のようにアイコンが回転します。
ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。
上記のアイコンを回転させても意味が分かりませんね。
以下の様なアイコンを回転させることで使い道があるかと思います。
ここにテキストが表示されます。
ボーダーでアイコンを囲ってみる
classに【fa-border】を追加することで、アイコンをボーダーで囲うこともできます。
<i class="fab fa-twitter fa-border"></i>ここにテキストが表示されます。
<i class="fas fa-archway fa-border"></i>ここにテキストが表示されます。
<i class="fab fa-apple fa-border"></i>ここにテキストが表示されます。
以下のようにアイコンをボーダーで囲めます。
ここにテキストが表示されます。
ここにテキストが表示されます。
ここにテキストが表示されます。
まとめ
WordPressサイトにWebアイコン【Font Awesome】を実装する方法をご紹介しました。
WEBアイコンはサイトの装飾などで利用する機会も多いかと思います。
【Font Awesome】は、コピペだけで簡単に実装できますので、ぜひ実装してみてください。
今回のコンテンツで分からないところがあれば、お問い合わせください。
コメントを残す