WordPressプラグイン「Font Awesome」の導入方法

WordPress に Font Awesome を導入する準備は、プラグインがいちばんかんたんです。
というわけで今回は、WordPressプラグイン「Font Awesome」の導入方法について、解説します。
目次
WordPressプラグイン「Font Awesome」導入方法
公式サイト:Font Awesome
万能な Webフォントを無料で使えるサービス「Font Awesome」。プラグインをインストールするだけで、この便利さを手に入れることができます。
それではプラグイン「Font Awesome」の導入方法を、解説していきます。
インストール方法
- キーワードでfont awesomeを、検索
- 「Font Awesome」の今すぐインストールをクリック
- インストール完了後、有効化をクリック
ダウンロードの場合は、こちら→ Font Awesome
これでインストール作業は、完了です。
無料版の Font Awesome を使う基本設定
WordPress のダッシュボードから、設定 - Font Awesomeをクリックします。
- 基本設定
- Method:webfont
- Use Pro:チェックしない
- Version 4 Compatibility:forbid
- Pseudo-elements Support(日本語訳は、擬似要素のサポート):require
- Version:Latest(最新を選ぶ)
- Remove unregistered clients:チェックしない
Save Cahge をクリックして、設定を保存しましょう。
基本的にはこの設定で、Font Awesome を、WordPress で使えるようになります。
設定の解説
それでは、プラグインの設定項目について、解説していきます。
- 設定について解説
- Method:webfont・SVGどちらかの形式を選べる
- Use Pro:有料版を使う場合はチェックする
- Version 4 Compatibility:Version4のフォントを使うかの項目
- Pseudo-elements Support(日本語訳は、擬似要素のサポート):Before・afterの擬似要素を使うかの項目
- Version:5〜最新版まで選択可能
- Remove unregistered clients:使用テーマですでにFont Awesomeを導入している場合に、正常に動作させる項目
「Save Changes」の下に、次のようなメッセージが表示されます↓
We don't detect any other active clients (like themes or plugins) that have registered requirements for Font Awesome.
(翻訳)
クライアント要件
Font Awesomeの要件を登録している他のアクティブなクライアント(テーマやプラグインなど)は検出されません。
We detected no unregistered clients.
(翻訳)
未登録のクライアント
未登録のクライアントは検出されませんでした。
WordPressのテーマで、Font Awesome を使用している場合などに、メッセージをだしてくれます。
基本的には、すでに解説した基本設定で、問題ありません。
Font Awesome の実装事例
実際に Font Awesome を導入した事例を、ご紹介します。
コードでそのまま表示させる
書かれているコード
<i class="fas fa-dove fa-1x"></i>
<i class="fas fa-dove fa-3x"></i>
<i class="fas fa-dove fa-5x"></i>
<i class="fas fa-dove fa-7x"></i>
実際の表示
FontAwesome のアイコンページで、コードをコピーします。そのまま貼り付ければ、表示できますよ。
公式のコードカスタマイズは、「Sizing Icons | Font Awesome」をごらんください。
ブログのメニューにアイコンを設置する方法で、もっとわかりやすく解説しています。
公式じゃわからん!って人は、こちらをどうぞ↓

擬似要素で表示させる
↑たとえば、こんな感じです。
擬似要素でつかえるようになると、WEBデザインにもぐっと幅がひろがります。
具体的な CSS コードの書き方や、実際の使い方をまとめておきました。
気になる方は、こちらをどうぞ↓

プラグインを入れることに抵抗があるなら...
プラグインで「Font Awesome」の導入は、完了しましたか?
じつはプラグインの場合は、WordPress サイトの表示速度などが遅くなる場合があります。
手軽ですが、デメリットもあるということですね。
プラグインが増えることに抵抗のある方は、HEAD タグに入れる方法もありますので、こちらのページを参照してください↓

まとめ
WordPressプラグイン「Font Awesome」導入方法を、解説してきました。
プラグインを使うことで、手軽に無料で使えるアイコン WEB フォントを、インストールできます。
さぁて、いよいよ!Font Awesome 導入方法の徹底解説のページに進み、Font Awesome をあなたのサイトに設置しちゃいましょう↓

そのほか、愛好家がえらぶ、おすすめ WordPress プラグインは、こちらをどうぞ↓