プラグインでアイコンフォントを取り入れよう

アイコンフォントを簡単にWordPressサイトで使えるようになるプラグインのご紹介です。
手間がかからずにサイトをかっこ良く演出可能です。

スポンサーリンク

アイコンフォントとは?

アイコンフォントとは、画像の代わりに使用が出来るフォントです。
有料・無料問わず使用されているWordPressテーマが増えてきている印象を受けます。

        

上記がアイコンフォントの使用例です。

本日ご紹介をする「WordPress Visual Icon Fonts」を使えば簡単にアイコンフォントを使えうようになります。

  • 画像よりも軽いのでページ読み込み速度が向上する
  • カラーやサイズ変更が簡単に出来る
  • 画像製作の手間を省ける

これだけメリットがあるアイコンフォントを使わない手はありません。
早速、導入方法をご紹介します。

WordPress Visual Icon Fontsの導入

Choose from 500+ Font Awesome Icons in the editor with filter & search, and rich content editing.

通常のプラグインと同じように

管理画面の左サイドバー「プラグイン」 > 新規追加 > WordPress Visual Icon Fontsで検索
WordPress Visual Icon Fontsをインストールして有効化しましょう

使い方

有効化した後に細かい設定はありません。
各投稿ページに追加のためのアイコンが設定されているはずです。

wordpress-visual-icon-fonts-1

使用する場合は「Icon」ボタンをクリックします。

wordpress-visual-icon-fonts-2

クリックをすると使用可能なアイコンの一覧が表示されます。
検索ボックスにアイコンのスペルを打ち込むと検索が可能です。

また、WordPress Visual Icon Fontsは「Font Awesome Icon」を使用しています。
公式サイトで使用したいフォントを検索する方法もいいと思います。
僕はこの方法で検索をしています。

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

369種類もアイコンがあるので、公式サイトのほうが確認が楽です。
この豊富さが魅力のひとつです。

自在に使いこなす方法

ここではTwitterのアイコンを表示する方法をご紹介します。

通常表示:

<i class="fa fa-twitter-square"></i>

これが表示の基本形です。

サイズの変更:  

<span style="font-size: 54px;"> <i class="fa fa-twitter-square"></i> </span>

サイズを54pxに変更し拡大表示してみました。
フォントアイコンはサイズを拡大しても画像が荒れません。

カラーの変更:  

<span style="color: #00aced;"> <i class="fa fa-twitter-square"></i> </span>

カラーを公式カラーに変更してみました。
フォントアイコンはカラー変更も楽ちんです。

サイズとカラーの変更:  

<span style="font-size: 54px; color: #00aced;"> <i class="fa fa-twitter-square"></i> </span>

サイズを54px、カラーを公式に変更。
一瞬で「それっぽい」アイコンの作成が可能です。

またCSSと組み合わせると、リスト表示などに使用が可能です。
このサイトでもリスト表示にフォントアイコンを使っています。

  • リストに
  • フォントアイコンを
  • 使っています

かなり自由度が高いので上手く使いこなしてみてください!

プラグインを使いたくない場合

プラグインなしでも「Font Awesome Icon」の使用は可能です。
参考サイト様を見て頂き、導入してみてください。

便利に使えるBootstrapですが、 元々用意されている標準アイコンでは 使いたいものがない場合に 「Fon…

よくわからない人はプラグインで導入しましょう。

まとめ

WordPress Visual Icon Fontsを使えば簡単にサイトにアイコンフォントの導入が可能です。
使うと「カッコイイ」のでぜひ、導入をしてみてください。

このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootst...

細かい使い方に関して非常にわかりやすく解説されています。
本格的に利用される際はぜひ、参考にしてみてください。

ちょくちょく使う機会があるのですが、いちいちサイト探してコピペとかも面倒なので、備忘録として記載しておきます。(2013年7月現在)

また、各SNSの公式カラーに関しては下記のサイト様を参照に。
では、素敵なアイコンフォント・ライフを!

この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

コメント

  1. 【絵動-kaiDO-サイト】追加情報&ちょっとしたカスタマイズ | 絵動 -kaiDo- より:

    […] 流行りのアイコンフォントをサイトに取り入れよう【WordPress Visual Icon Fonts】 […]

  2. […] 流行りのアイコンフォントをサイトに取り入れよう【WordPress Visual Icon Fonts】 […]

  3. 【WP Visual Icon Fonts】アイコンフォントをWPサイトに導入 より:

    […] プラグインでアイコンフォントを取り入れよう […]