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

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

アイコンフォントとは？

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

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

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

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

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

WordPress Visual Icon Fontsの導入

Visual Icon Fonts

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

wordpress.org

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

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

使い方

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

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

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

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

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

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」の使用は可能です。
参考サイト様を見て頂き、導入してみてください。

http://www.tailtension.com/bootstrap/1655/

www.tailtension.com

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

まとめ

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

楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO

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

h2ham.net

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

http://akiyum.com/webdesign_tips/sns-brandcolor.html

akiyum.com

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

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~

created by Rinker

¥4,500 (2024/04/24 21:03:07時点 Amazon調べ-詳細)

• Amazon
• 楽天市場