アイコンフォントをワードプレスで簡単に使えるプラグイン「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
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

使っているワードプレステーマは大丈夫?テーマの選定方法とチェックポイント
Google公式プラグインを使って出来るワードプレスのAdsense管理でリスク回避を
Googleに更新情報を素早く伝えるためのプラグイン「PuSHPress」
Ping送信管理プラグイン「WordPress Ping Optimizer」で送信エラーをチェック
Google XML Sitemapsプラグインのインストール
ワードプレス構築の際に最初に入れると便利なプラグイン(Principle限定)
サイトコンテンツのコピーを防ぐプラグイン「Check Copy Contents」、「Easy Watermark」
ツイッターとワードプレスを連携させるプラグイン「WP to Twitter」の設定方法
ワードプレスのテーマ作成・編集の際に使えるプラグイン「Theme Test Drive」
フラットデザインに使えるフラットアイコンまとめ(2014春)
ワードプレスデータをMovable Type(MT)や無料ブログにインポート(移行)する方法
過去の投稿記事をTwitterで自動再ツイートするプラグイン・Tweetily
ワードプレステーマを変更せずにCSSを追加・管理する方法
料理や食材用に使える無料のアイコン お勧め3サイト 
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」

Menu

HOME

 TOP