WordPress

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

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

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

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

準備

Font Awesomeを利用する方法は2つありますが、最初から設定されているテーマもありますので、一度下記コードをそのまま入力して のアイコンが表示されるか確認して下さい。

のアイコンが表示されれば、準備は必要ありません。表示されない場合は準備を進めて下さい。

CDNを利用する方法（簡単おすすめ）

ヘッダーに下記のコードを貼り付けるだけです。

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

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

CDNを利用する方法

CDNを利用する方法

以上で準備は完了です。

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

サーバーにCSSをアップロードして使う方法

CDNを利用しない場合はこちらの方法を使います。

Font Awesome, the iconic font and CSS toolkitから必要なファイルをダウンロードします。

Font Awesomeのファイルをダウンロード

Font Awesomeのファイルをダウンロード

ダウンロードしたzipファイルを解凍して、赤字のフォルダとファイルをサーバーにアップロードします。その他（黒字）のフォルダとファイルは必要ありません。

  • css
    • font-awesome.css
    • font-awesome.min.css
  • fonts
    • FontAwesome.otf
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff2
  • less
  • scss
  • HELP-US-OUT.txt

任意の場所で構わないのですが、「cssフォルダ」と「fontsフォルダ」は同じ階層にアップロードして下さい。階層の異なる場所に設置した場合、cssの「@fa-font-path」を変更する必要があります。

例えば、テーマのフォルダにアップロードする場合、「cssフォルダ」に「font-awesome.min.css」を、「fontsフォルダ」を作成して、その中に「fontsファイル」を全てアップロードします。

この際、親テーマのフォルダにアップロードすると、テーマをアップデートした際に初期化されてしまいますので、テーマフォルダを使う場合はできるだけ子テーマを利用して下さい。

パス：/ドメイン/public_html/wp-content/themes/使用中のテーマ/

サーバーにファイルをアップロード

サーバーにファイルをアップロード

最後に、テーマヘッダー（header.php）の<head>セクション内に「font-awesome.min.css」をスタイルシートとして読み込む記述を追加します。ファイルをアップロードした場所によって記述は異なりますので、「href=""」には必ずアップロードしたパスを指定して下さい。

先程の場所なら下記の様になります。

パス：http://ドメイン/wp-content/themes/使用中のテーマ/css/font-awesome.min.css

サーバーにCSSをアップロードして使う方法

サーバーにCSSをアップロードして使う方法

以上で準備は完了です。

使い方

詳しい使い方は公式サイトFont Awesome Examplesを参考にして下さい。

基本的な使い方（iタグにclass属性を指定する）

fa-camera-retro

基本は、iタグにclass属性「fa」を指定した上で、各アイコンに割り振られたclass属性「fa-camera-retro」等を指定します。アイコンのclass名一覧はFont Awesome Iconsで確認できます。

ちなみに、spanタグやpタグで使うこともできます。

色の変更

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

#0000ff
#ff0000

大きさの変更

最初から5段階で大きさを変更できるスタイルが用意されています（6x以降はありません）。

default fa-lg fa-2x fa-3x fa-4x fa-5x

fontタグやspanタグで変更することもできます。

font size="5" font-size: 50px

横幅の統一

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

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

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

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

リストマークにする

ulのclass属性に「fa-ul」、iタグのclass属性に「fa-li」を付けます。

アイコンはそれぞれ自由に設定することができます。

  • fa-check
  • fa-check-circle
  • fa-check-circle-o
  • fa-check-square

ボーダーで囲う

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

default
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フレームで回転します。

default
fa-spin
fa-pulse

回転と反転

クラス属性に「fa-rotate-○」を付けると回転します（90°間隔）。
クラス属性に「 fa-flip-horizontal」及び「fa-flip-vertical」で反転します。

default
fa-rotate-90
fa-flip-horizontal
fa-flip-vertical

重ねる

アイコンを重ねて使えるスタイルも用意されています。




最後に

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

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

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

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

RECOMMENDこちらの記事も人気です。