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

この記事のURLとタイトルをコピーする
WordPressプラグイン

WordPress に Font Awesome を導入する準備は、プラグインがいちばんかんたんです。

というわけで今回は、WordPressプラグイン「Font Awesome」の導入方法について、解説します。

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

Wp fontawesome plugin

公式サイト:Font Awesome

万能な Webフォントを無料で使えるサービス「Font Awesome」。プラグインをインストールするだけで、この便利さを手に入れることができます。

それではプラグイン「Font Awesome」の導入方法を、解説していきます。

【参考】公式のハウツーページ:WordPress | Font Awesome

インストール方法

Wp plugin fontawesome1

  1. キーワードでfont awesomeを、検索
  2. 「Font Awesome」の今すぐインストールをクリック
  3. インストール完了後、有効化をクリック

ダウンロードの場合は、こちら→ Font Awesome

これでインストール作業は、完了です。


無料版の Font Awesome を使う基本設定

Fontawesome settei2

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 で使えるようになります。


設定の解説

Wp fontawesome setei

それでは、プラグインの設定項目について、解説していきます。

設定について解説
  • Method:webfont・SVGどちらかの形式を選べる
  • Use Pro:有料版を使う場合はチェックする
  • Version 4 Compatibility:Version4のフォントを使うかの項目
  • Pseudo-elements Support(日本語訳は、擬似要素のサポート):Before・afterの擬似要素を使うかの項目
  • Version:5〜最新版まで選択可能
  • Remove unregistered clients:使用テーマですでにFont Awesomeを導入している場合に、正常に動作させる項目

「Save Changes」の下に、次のようなメッセージが表示されます↓

Client Requirements
We don't detect any other active clients (like themes or plugins) that have registered requirements for Font Awesome.

(翻訳)
クライアント要件
Font Awesomeの要件を登録している他のアクティブなクライアント(テーマやプラグインなど)は検出されません。
Unregistered Clients
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>

実際の表示




Wp globalmenu icon5

FontAwesome のアイコンページで、コードをコピーします。そのまま貼り付ければ、表示できますよ。

公式のコードカスタマイズは、「Sizing Icons | Font Awesome」をごらんください。

ブログのメニューにアイコンを設置する方法で、もっとわかりやすく解説しています。

公式じゃわからん!って人は、こちらをどうぞ↓

擬似要素で表示させる

Fa pseudo elements eycatch

←擬似要素で表示

↑たとえば、こんな感じです。

擬似要素でつかえるようになると、WEBデザインにもぐっと幅がひろがります。

具体的な CSS コードの書き方や、実際の使い方をまとめておきました。

気になる方は、こちらをどうぞ↓

プラグインを入れることに抵抗があるなら...

プラグインで「Font Awesome」の導入は、完了しましたか?

じつはプラグインの場合は、WordPress サイトの表示速度などが遅くなる場合があります。

手軽ですが、デメリットもあるということですね。

プラグインが増えることに抵抗のある方は、HEAD タグに入れる方法もありますので、こちらのページを参照してください↓

まとめ

WordPressプラグイン「Font Awesome」導入方法を、解説してきました。

プラグインを使うことで、手軽に無料で使えるアイコン WEB フォントを、インストールできます。

さぁて、いよいよ!Font Awesome 導入方法の徹底解説のページに進み、Font Awesome をあなたのサイトに設置しちゃいましょう↓

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

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,755,662 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール