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

コメントを残す




関連記事

ワードプレステーマを変更せずにCSSを追加・管理する方法
データを簡単にグラフ化してくれるプラグイン「Visualizer – WordPress Charts and Graphs」
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」
料理や食材用に使える無料のアイコン お勧め3サイト 
記事投稿時のタグ補完用プラグイン「AddQuicktag」のインストール
Google XML Sitemapsプラグインのインストール
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
ワードプレスサイトのセキュリティは大丈夫!?3つのポイントを押さえて万全に
サイトの管理・運用に便利なプラグイン「Google Analytics Dashboard」のインストール
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
このサイトのテーマについて
ワードプレスとGoogle+を連携させるプラグイン「JetPack」の設定方法
ワードプレスでfunctions.phpのコードを簡単に管理できるプラグイン「Code Snippets」
ワードプレス構築の際に最初に入れると便利なプラグイン(Principle限定)
PS Auto Sitemapプラグインのインストール

Menu

HOME

 TOP