現在、いろんなウェブアイコンフォントが出ており、このサイトでもいくつか紹介してきました。
ただ、アイコンフォントを使うためにはCSS（スタイルシート）を読み込んで、
<i class="icon-android"></i>
のようにタグを書く必要があります。（このコードでは を表示。）
そのため、初心者の方にはちょっと敷居が高かったりします。
そんな方の為に紹介するのがアイコンフォントを簡単に使えるプラグイン、「WP Visual Icon Fonts」です。
WP Visual Icon Fontsとは
FWP Visual Icon FontsはFont Awesome4のアイコンフォント、及びオリジナルのアイコンフォントを簡単に文章内で使う事が出来るプラグインです。
このプラグインをインストールすることで、CSSががワードプレスに組み込まれるので、別途、CSSを用意する必要はありません。
使い方は簡単
このプラグインをインストールすると、投稿画面に「ICONS」のボタンが追加されるので、アイコンを追加したい文章に合わせて、「ICONS」のボタンをクリックすると、いろんなパターンのアイコンがドロップリストで表示されます。
使いたいアイコンを選択すると、文章にタグが追加されます。お好みのアイコンを選んでください。
インストール
このプラグインをインストールするには、プラグインの追加画面から、プラグインの検索で、「WP Visual Icon Fonts」で検索をかけると表示されます。
いますぐインストールボタンをクリックすることで簡単にインストールすることが出来ます。
追記
今回、紹介した「WP Visual Icon Fonts」ですが、挿入されたコードにクラスを追加することで、大きさを変えたり、色を付けたりする事が出来ます。
大きさを変更
例えば次のようにアイコンの大きさを変化させる場合は、クラスに「fa-2x」のようにクラスを追加してきます。
：標準
：クラスにfa-2xを追加
：クラスにfa-3xを追加
コードを見るとこんな感じです。
<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i> ：標準 <i class="fa fa-refresh fa-2x"><span style="color:transparent;display:none;">icon-refresh</span></i> ：クラスにfa-2xを追加 <i class="fa fa-refresh fa-3x"><span style="color:transparent;display:none;">icon-refresh</span></i> ：クラスにfa-3xを追加
アイコンの大きさを変えて、少し印象を変えたい時に使えます。
色を変更
アイコンの色を変える場合ですが、クラスに色指定を行います。
：標準
：赤に変更
：青に変更
コードを見るとこんな感じです。
<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i> ：標準 <i class="fa fa-refresh red"><span style="color:transparent;display:none;">icon-refresh</span></i> ：赤に変更 <i class="fa fa-refresh blue"><span style="color:transparent;display:none;">icon-refresh</span></i> ：青に変更
色と大きさを同時に付けることも可能です。
：標準
：2倍で赤に変更
：3倍で青に変更
コードはこちらです。
<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i> ：標準 <i class="fa fa-refresh red fa-2x"><span style="color:transparent;display:none;">icon-refresh</span></i> ：2倍で赤に変更 <i class="fa fa-refresh blue fa-3x"><span style="color:transparent;display:none;">icon-refresh</span></i> ：3倍で青に変更
色と大きさを組み合わせるといろんな表現が可能になります。
最後に
今回、紹介したプラグイン「WP Visual Icon Fonts」ですが、インストールするだけで簡単にアイコンフォントが使える優れものです。
サイトの文書に少し、アクセントを追加したい時などに、有効なので、是非、使ってみて下さい。
コメント