アイコンフォントをワードプレスで簡単に使えるプラグイン「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」ですが、インストールするだけで簡単にアイコンフォントが使える優れものです。
サイトの文書に少し、アクセントを追加したい時などに、有効なので、是非、使ってみて下さい。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

このサイトのテーマについて
サイト管理・運用用プラグイン「Maintenance Mode」のインストール
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
PS Auto Sitemapプラグインのインストール
ワードプレスのテーマにOGP(Open Graph Protocol)を簡単に対応させる方法
CSVデータインポート時に体験した注意点やインポートエラーの解決方法
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
表情がかわいらしい無料のフェイスアイコン400個
ワードプレスでfunctions.phpのコードを簡単に管理できるプラグイン「Code Snippets」
人気記事表示用プラグイン「WordPress Popular Posts」の設定方法
ワードプレスで投稿時にツイッターで画像も一緒に送れるプレスプラグイン「SNAP」
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
記事投稿時のタグ補完用プラグイン「AddQuicktag」のインストール
ワードプレスとGoogle+を連携させるプラグイン「JetPack」の設定方法
MySQLデータベースを使用しないでワードプレスを構築する方法

Menu

HOME

 TOP