Webアイコン 『FontAwesome』をプラグインを使って簡単導入
『FontAwesome』は昨年最新バージョン6をリリースしました。ですが現時点(2021年2月23日時点)ではまだ「Pre-Order(先行販売)」のみで有料版の人のみがバージョン6が使用できるようになっています。
Font Awesome6の提供が開始されました。Font Awesome6は有料のみでFree(無料)で使うことができません。(2021年7月)
この記事で紹介するプラグインで無料で使えるのはバージョン5です。
FontAwesomeのアイコンを使うにはアカウント登録をして、「Kit」を作成し、コードを自分のサイトのHEADタグ内に入れなければなりません。
これは最新バージョンの6でも同じだと思います。
「Kit」を作ったり、WordPressではHEADタグ内にコードを入れるにはどうしたらいいか悩む人も多く、初心者にはちょっと難しいかもしれません。
そこで今回は「プラグインを使って簡単にFontAwesomeを導入する方法」をご紹介します。プラグインを使用しますが、アカウント登録やHEADタグ内にコードを入れる必要もないので簡単に導入できます。
またFontAwesome公式のプラグインなので、バージョン6が公開されれば対応できると思います。
Font Awesomeの導入方法
Font Awesomeの導入方法は主に3つです。
- アカウント登録してコードを取得する
- プラグインを使う
- テーマに搭載されている機能を使う
※「アカウント登録してコードを取得」はプラグインをつ使わいため、WordPress以外の方でも導入できます。(コードのし取得方法は以下の記事を参考にしてください。)
https://kirari-yums.net/post-10196/※「テーマに搭載されている機能を使う」は一部のテーマにはFont Awesomeる使用できる機能が搭載されています。
Luxeritasをお使いの方は以下の記事を参考にしてください。
プラグインのインストール
インストール方法
- WordPress管理画面から［プラグイン］［新規追加］
- 『Font Awesome』を検索
- ［今すぐインストール］して［有効化］する
https://ja.wordpress.org/plugins/font-awesome/設定
インストール後WordPress管理画面の左メニューの［設定］の中に［Font Awesome］が追加されているので、［Font Awesome］クリックして設定画面を開きます。
特に変更は必要ないと思いますが一応説明を書いておきます。
「Use CDN」(Font Awesomeから読み込み)を選択
「Pro」か「Free」を選択 (「Pro」は有料版です)
「SVG」か「Web Font」を選択 (「Web Font」を選択)
使用するFont Awesomeのバージョン (デフォルトで最新バージョンになっているので変更する必要はありません。)
旧バージョン4.7との互換
使い方
使い方はプラグインを使わずにFont Awesomeを導入した場合と同じです。使い方の詳細は以下の記事で解説していますので参考にしてください。
へえー。普通にアイコンが使えるんだぁ。プラグイン入れるだけで使えるからいいね♪
そうそう!CSSで設定もアカウント登録して使う場合と同じように設定できるよ！
最後に
プラグインを使ったFont Awesomeの導入方法を紹介しましたがいかがだったでしょう。
アカウント登録しないで使えるし、アイコンも普通にiタグやCSSで使えます。「導入したいけど…」と悩んでいる初心者の方に大変おすすめです。
Font Awesomeのアイコンはいろいろなテーマで使われています。テーマによってはテーマで使用しているもの以外使えなかったりします。プラグインを使えば簡単に導入できるのでぜひ使ってみてください。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
