WordPressにFont Awesomeを導入する方法と使い方

WordPressにFont Awesomeを導入する方法と使い方

Font Awesomeは、Webフォント機能を使って表示するテキスト文字のアイコンです。フォントですから、サイズや色等すべてCSSで調整するこができます。もちろん無料です。

ちなみに、 これ→ 全てフォント(アイコン)です。画像じゃありません。なんか凄い!

そこで今回は、このFont AwesomeをWordPressに導入する方法と使い方を紹介します。

Font Awesomeを使う前の注意

2017年12月にFont Awesome Version 5がリリースされました。

大きく変更された点
  1. 有料のProバージョンができた(使えるアイコンの数が多い)。
  2. JavaScriptとSVGによる描画が新たに追加された(推奨されている)。
  3. faプレフィックスから種類ごとのプレフィックスfas、far、fal、fabに変更された。

これからFont Awesomeを導入される方は特に問題ありません。

問題はVersion 4を利用されていた方がVersion 5にアップデートするケースです。プレフィックス(接頭語)が変更されたので、そのままアップデートすると一部のアイコンが表示されなくなります。

参考:Upgrading from Version 4 | Font Awesome

特に、最初からテーマにFont Awesomeが設定されている(使われている)場合は注意して下さい。

準備

CDNを利用する方法です(簡単おすすめ)。ヘッダーに下記のコードを貼り付けます。

この際、コードはGet Started with Font Awesome | Font Awesomeの最新版を使って下さい。上記は「Ver.5.1.0」のコードです。Ver.が古いと新しく追加されたフォント(アイコン)が使えません。

Use Font Awesome Free CDN

Use Font Awesome Free CDN

コピーできたら、テーマヘッダー(header.php)の<head>セクション内に貼り付けます。

CDNを利用する方法

CDNを利用する方法

以上で準備は完了です。

CDNとは、Content Delivery Network(コンテンツ・デリバリ・ネットワーク)の略で、世界中に張り巡らされたサーバ(CDN配信プラットフォーム)を通して、コンテンツにアクセスしようとするエンドユーザに最も近いサーバから効率的に配信する仕組みのことです。

他にも、ファイルをダウンロードしてサーバーにアップロードする方法もありますが、更新が面倒なのと手順が少し複雑になってしまうので、個人的にはCDNを利用する方法をおすすめします。

使い方

Version 4とVersion 5ではプレフィックス(接頭語)が異なります。

また、使えるクラス属性も異なるので、詳しい使い方は公式サイトで確認して下さい。

Version 4 Examples | Font Awesome
Version 5 How to Use | Font Awesome

僕はVersion 4.7を利用しています。

基本

アイコン一覧からアイコンを選択し、表示されているコードをコピーして貼り付けます。

Version 4 The Icons | Font Awesome
Version 5 Icons | Font Awesome
アイコンを選んでコードをコピーするだけ

アイコンを選んでコードをコピーするだけ

基本は「iタグ」を使いますが、「spanタグ」や「pタグ」も使えます。

但し、「pタグ」を使用する場合は、「pタグ」のCSSの影響を受けるので注意が必要です。


色の変更

テキスト同様、「fontタグ」「spanタグ」及び「cssのクラス属性」で変更することができます。


大きさの変更

大きさを変更するクラス属性が最初から用意されています。






テキスト同様、「fontタグ」や「spanタグ」で変更することもできます。


横幅の統一

アイコンはそれぞれ横幅が異なるため、通常では後ろのテキスト開始位置がずれてしまいます。

fa-home
fa-thumbs-o-up
fa-cc-visa
fa-bluetooth

そんな時は、クラス属性に「fa-fw」を付けることで横幅が統一されます。

fa-home
fa-thumbs-o-up
fa-cc-visa
fa-bluetooth

ボーダーで囲う

クラス属性に「fa-border」を付けると角の丸いボーダーで囲まれます。


回り込み

クラス属性に「fa-pull-left」及び「fa-pull-right」を付けると回り込みを指定できます。

pull-leftは左寄せ、pull-rightは右寄せになります。

「fa-quote-left」アイコンに左寄せを指定、「fa-quote-right」に右寄せを指定しています。

回転させる

クラス属性に「fa-spin」及び「fa-pulse」を付けるとアイコンが回転します。

fa-spinは滑らかに回転、fa-pulseは8フレームで回転します。



最後に

Font Awesomeのアイコンは、画像ではなくフォントですから、テキスト感覚で使えます。

ただ、最初から用意されているスタイル(クラス属性)を利用した際、テーマによってはレイアウトが崩れる可能性もあるので、その際はCSSを修正して下さい。

Font Awesomeを使えるようにするプラグインもたくさんありますが、更新が止まっていたり、無駄なタグがついていたり、ショートコードで挿入するタイプが多く、後々変更するのが大変そうな気がしたので、個人的にはCDNファイルを読み込み、「iタグ」で入力した方が楽な気がします。

スポンサーリンク
スポンサーリンク