2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!

1サイト構築の際にタイトルの装飾などによく絵文字が使われているのを見かけると思いますが、あれって自作するのって大変だなと思いますよね。
実はあの絵文字ですがウェブアイコンフォントを使ってるんです。
私も前々から知ってはいたんですが、最近、サイト構築で使ってみたのでこれを機に紹介したいと思います。
その前に、ウェブアイコンフォントを使うメリットを少し上げておきます。

ウェブアイコンフォントを使うメリットとは

ウェブアイコンフォントを使うメリットですが次のようなことが挙げられます。

  • 今まで自作していたアイコンを新しく作らなくて済む
  • 画像ではなくテキストなのでウェブ表示速度が向上(CMSを使っている場合は意外と重要)
  • あくまでもフォントなのでサイズを大きくしても画質が落ちない
  • 色の変更などカスタマイズが楽になる

などが挙げられます。
これらはウェブ構築を行うに当たって結構、メリットがあると思います。特にアイコンを自作するのか、ウェブアイコンフォントを使うのかでは工数的に大きく違ってきます。

CSSで見た目を変えようと思った時に、普通のテキストと同じやり方でカスタマイズできるのが非常に手軽です。
今回は私がおすすめする2種類のウェブアイコンフォントを紹介します。

お勧めのウェブアイコンフォント

Font Awesome

1つ目ですが、CSSフレームワークとしても使える「Font Awesome」です。

現時点(2014/5/21)で648個のアイコンが登録されています。

Foundation Icon Fonts 3

2つめはCSSフレームワークとしても有名な「Foundation」のウェブアイコンフォントです。

アイコンの種類もGeneral,page,arrow,people,device,text editor,media control,ecommerce,accessibility,social,miscellaneousと種類別に色々と分けてあるので便利です。

使用方法

ウェブアイコンフォントの使用方法ですがどちらもCSSファイルとフォントファイルを適切にウェブにアップロードしてCSSの設定を行い、使用したい場所で

<i class="アイコンフォントクラス名"></i>

を入れることで表示可能です。
Font Awesomeのcssを参考にして、例えば

<p><i class="fa fa-camera-retro"></i>fa-camera-retroを表示</p>

と入力することで
fa-camera-retroを表示
と表示されます。
アイコンを大きくするときには

<p><i class="fa fa-camera-retro fa-2x"></i>fa-camera-retroを表示</p>

iconx2fa-2をクラスに追加すると大きく表示されます。
fa-camera-retroを2倍サイズで表示
サイズの変更は次のようにクラス分けされています。

fa-lg ラージサイズ
fa-2x 2倍
fa-3x 3倍
fa-4x 4倍
fa-5x 5倍

Principleのテーマで使う際にはCSSとFontのフォルダをテーマフォルダにアップロードして、子テーマのstyle.cssにcssをインポートするコードを入れて下さい。

@import url('../principle/style.css'); ←元からあるコード
@import url('../principle/css/font-awesome.min.css');  ←このコードを追加

最後に

今回、2種類のウェブアイコンフォントを紹介しましたが、他にも色々とあるようです。
自分の使い勝手やサイトの構成に合わせたアイコンフォントを使う事によってデザイン的に、また、工数的にもメリットがあると思うので興味のある方は是非、試してみて下さい。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

webデザインのグリッドレイアウト作成に使える無料ツール
これは便利!グラデーションが簡単に作れるCSSジェネレーター
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
Bootstrapを採用しているhtmlテンプレート&テーマ
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
アイコンフォントをワードプレスで簡単に使えるプラグイン「WP Visual Icon Fonts」
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
表示しながらCSSの編集が出来るFirebugの使い方
表情がかわいらしい無料のフェイスアイコン400個
料理や食材用に使える無料のアイコン お勧め3サイト 
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets

Menu

HOME

 TOP