アイコンフォントをワードプレスで簡単に使えるプラグイン「WP Visual Icon Fonts」

スポンサーリンク
wp Visual Icon fonts アイコン

現在、いろんなウェブアイコンフォントが出ており、このサイトでもいくつか紹介してきました。

ただ、アイコンフォントを使うためにはCSS(スタイルシート)を読み込んで、

<i class="icon-android"></i>

のようにタグを書く必要があります。(このコードでは icon-android を表示。)

そのため、初心者の方にはちょっと敷居が高かったりします。

そんな方の為に紹介するのがアイコンフォントを簡単に使えるプラグイン、「WP Visual Icon Fonts」です。
wp Visual Icon fonts

スポンサーリンク

WP Visual Icon Fontsとは

FWP Visual Icon FontsはFont Awesome4のアイコンフォント、及びオリジナルのアイコンフォントを簡単に文章内で使う事が出来るプラグインです。
このプラグインをインストールすることで、CSSががワードプレスに組み込まれるので、別途、CSSを用意する必要はありません。

使い方は簡単

このプラグインをインストールすると、投稿画面に「ICONS」のボタンが追加されるので、アイコンを追加したい文章に合わせて、「ICONS」のボタンをクリックすると、いろんなパターンのアイコンがドロップリストで表示されます。

ボタンが追加

使いたいアイコンを選択すると、文章にタグが追加されます。お好みのアイコンを選んでください。

アイコンを選択

アイコンの種類はFont Awesome4で369種類、オリジナルで62種類の計431種類あるので、通常使う分には十分です。

インストール

このプラグインをインストールするには、プラグインの追加画面から、プラグインの検索で、「WP Visual Icon Fonts」で検索をかけると表示されます。

いますぐインストールボタンをクリックすることで簡単にインストールすることが出来ます。

インストール

追記

今回、紹介した「WP Visual Icon Fonts」ですが、挿入されたコードにクラスを追加することで、大きさを変えたり、色を付けたりする事が出来ます

大きさを変更

例えば次のようにアイコンの大きさを変化させる場合は、クラスに「fa-2x」のようにクラスを追加してきます。
 icon-refresh :標準
 icon-refresh :クラスにfa-2xを追加
 icon-refresh :クラスにfa-3xを追加

コードを見るとこんな感じです。

&nbsp;<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:標準
&nbsp;<i class="fa fa-refresh fa-2x"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:クラスにfa-2xを追加
&nbsp;<i class="fa fa-refresh fa-3x"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:クラスにfa-3xを追加

アイコンの大きさを変えて、少し印象を変えたい時に使えます。

色を変更

アイコンの色を変える場合ですが、クラスに色指定を行います。
 icon-refresh :標準
 icon-refresh :赤に変更
 icon-refresh :青に変更

コードを見るとこんな感じです。

&nbsp;<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:標準
&nbsp;<i class="fa fa-refresh red"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:赤に変更
&nbsp;<i class="fa fa-refresh blue"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:青に変更

色と大きさを同時に付けることも可能です。

 icon-refresh :標準
 icon-refresh :2倍で赤に変更
 icon-refresh :3倍で青に変更

コードはこちらです。

&nbsp;<i class="fa fa-refresh"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:標準
&nbsp;<i class="fa fa-refresh red fa-2x"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:2倍で赤に変更
&nbsp;<i class="fa fa-refresh blue fa-3x"><span style="color:transparent;display:none;">icon-refresh</span></i>&nbsp;:3倍で青に変更

色と大きさを組み合わせるといろんな表現が可能になります。

最後に

今回、紹介したプラグイン「WP Visual Icon Fonts」ですが、インストールするだけで簡単にアイコンフォントが使える優れものです。
サイトの文書に少し、アクセントを追加したい時などに、有効なので、是非、使ってみて下さい。

コメント