アイコンフォント（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】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【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のカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
