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 プラグインは、こちらをどうぞ↓
この記事へのコメントはありません。