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

コメントを残す




関連記事

PS Auto Sitemapプラグインのインストール
ワードプレスデータをMovable Type(MT)や無料ブログにインポート(移行)する方法
ワードプレスの投稿記事を簡単に一括削除する3つの方法
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
サイト管理・運用用プラグイン「Maintenance Mode」のインストール
サイトコンテンツのコピーを防ぐプラグイン「Check Copy Contents」、「Easy Watermark」
CSVデータを簡単にインポート出来るプラグイン「Really Simple CSV Importer」を使用する際のポイント
フラットデザインに使えるフラットアイコンまとめ(2014春)
Google公式プラグインを使って出来るワードプレスのAdsense管理でリスク回避を
Google XML Sitemapsプラグインのインストール
Ping送信管理プラグイン「WordPress Ping Optimizer」で送信エラーをチェック
ワードプレスサイトのセキュリティは大丈夫!?3つのポイントを押さえて万全に
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」
ワードプレスのテーマにOGP(Open Graph Protocol)を簡単に対応させる方法
過去の投稿記事をTwitterで自動再ツイートするプラグイン・Tweetily

Menu

HOME

 TOP