WordPressプラグインを使ったFont Awesomeの設置方法を解説

 
Webフォントでアイコンを表示する事が出来る、Font Awesome。

しかし、設置の段階で苦戦している方も多いのではないでしょうか？
そこで今回は、WordPressプラグインを使った、最も簡単なFont Awesomeの使い方を紹介したいと思います。

Font Awesomeとは？

Font Awesomeは、画像ではなくテキストとしてアイコンを表示する事ができるフォントセットです。
 

 
このようなアイコン1つ1つは文字と同じ扱いの為、CSSを使う事によってサイズや色を自由に変更する事も可能です。

Font Awesomeの使い方

プラグインをインストールする

Font Awesomeを使う為のプラグインをインストールします。
管理画面から「プラグイン」→「新規追加」を選択し、

Font Awesome Iconsと検索。

インストールが完了したら、有効化ボタンを押します。
これでFont Awesomeを使う準備は完了です。

チャートシートの中から使用するアイコンを選択する

Font Awesome 3.2.1 チャートシートの中から、使用するアイコンを選びます。
選んだアイコンの横に表示されているicon-●●●という部分（ (&#xf〜;)の部分は含みません。）をコピーし、下記▲▲▲の部分にペースト。
 

 
これを文章中などのアイコンを表示させたい部分に挿入すれば完了です。

アイコンの色や大きさを変える

アイコンの色や大きさを変える為には、CSSを使います。
例えば、「（<i class=”icon-apple”></i>）」のアイコンの色を赤くし、20pxのサイズにするとすれば
 

 
とCSSに入力します。
 

まとめ

「プラグインをインストールし、チャートシートのコードを貼り付けるだけ」というのが今回紹介したFont Awesomeの設置方法でした。
もちろん、Font Awesomeの設置方法は他にもありますが、個人的にはこれが最も簡単な使い方かと思います。

Font Awesome設置の段階で手こずってしまっていた方は是非、参考にしてみてください！