アイコンフォント（FontAwesome）を使用できるようにするプラグイン「Easy FontAwesome」
- 公開日：2016年10月6日
カテゴリー:その他
WordPressのプラグインや、いろいろなサイトで見かけるアイコン、これをアイコンフォント（FontAwesome）といいます。WordPressの標準機能では使用できないこのアイコンフォントを有効化するだけで使えるようにするのが「Easy FontAwesome」プラグインです。
【Easy FontAwesome】プラグインの基本的な機能・できること
- アイコンフォント（FontAwesome）を使用可能にする
よく間違われるのは環境依存文字。よく似ていて通常の文字変換でアイコンフォントに似た記号を選択できるのですが、こちらは文字通り表示する環境によっては文字化けしたり表示されなかったりする文字です。
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Easy FontAwesome】プラグインの設定画面や表示の日本語化と翻訳
【Easy FontAwesome】プラグインは設定項目が少ないので特に必要ないでしょう
【Easy FontAwesome】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Easy FontAwesome】プラグインの基本的な使い方
プラグインの使用方法というよりはむしろどうやってアイコンフォントを使うのかということになります。現在使用できるアイコンフォントはこちらに掲載されています。更新されていくので毎回ここからコードを抽出する方法がおすすめです。
- 上記サイトへ行き、使いたいアイコンフォントをクリック
- 出てきたコードをコピー
- 投稿本文などへ貼りつけ
これで本文内にアイコンフォントが挿入できます
例）ファックスのアイコンフォントを追加する場合
- 上記のサイトから「Example of fax（ＦＡＸ）」をクリック
- 表示した画面上にあるコードをコピー
<i class="fa fa-fax" aria-hidden="true"></i>- 投稿本文などへ挿入
するとファックスのアイコンフォントが表示されます。
ちなみにサイズを変更したいときは
fa-■xというのを追加（■は２～５の数字）すればOK
例えば先ほどのファックスアイコンは
２倍(fa-2x)の場合
<i class="fa fa-fax fa-2x" aria-hidden="true">２倍</i>３倍(fa-3x)の場合
<i class="fa fa-fax fa-3x" aria-hidden="true">３倍</i>４倍(fa-4x)の場合
<i class="fa fa-fax fa-4x" aria-hidden="true">４倍</i>５倍(fa-5x)の場合
<i class="fa fa-fax fa-5x" aria-hidden="true">５倍</i>とするだけなので簡単に変えられますね。タグの間に文字を入れると文字も同じように拡大されます
また、色を変更したい場合通常はCSSで設定するのですが、CSSなんてよくわからないという方、特定のフォントだけ変更したい場合などは不通にpタグやfontタグで指定してやればOKです。
<font color="red"><i class="fa fa-fax fa-3x" aria-hidden="true">３倍</i></font>とすれば全体の文字やマークが赤色になります
その他アイコンフォントの使い方いろいろ（外部リンク）
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
こちらのサイトで詳しく掲載されていました。リンク先ページの前半に掲載されている内容をWordPressで簡単に設定してくれるのが「Easy FontAwesome」プラグインです。
いちばんやさしい WordPress 入門教室
(2021年11月22日 09:09 GMT +09:00 時点 - 追加情報商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
サイトへの支援をお願いします
最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします
作者: ひまあーと（管理人）
☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
年齢：40代 趣味／園芸・ペット・卓球
