無料でウェブ上で使えるアイコンがセットになった「Icon Fonts」

テーマごとにセットとなったアイコンがウェブ上で無料で使えるのが「Icon Fonts」。TwitterやFacebookなどウェブ上のブランドアイコンやピクトグラムを集めたものなどがあり、ファイルをダウンロードしなくても自由にアイコンを使うことが可能です。

We Love Icon Fonts
http://weloveiconfonts.com/

ウェブ上で使えるアイコンフォント5種類は以下から。

◆01:Brandico
FacebookやTwitter、Vimeoなど、オンライン上のブランドのアイコン。

◆02:entypo
250個以上のピクトグラムを集めたアイコンセット。

◆03:Font Awesome
Twitter Bootstrapとマッチするように作られたアイコンセット。

◆04:Typicons
こちらは電話マークやクエスチョンマーク、メールマークなどスタンダードなアイコンがセットになったもの。

◆05:zocial
Facebookからドロイドくん、Amazonのマークまでソーシャルっぽいアイコンいろいろ。

アイコンを使うにはまず、サイト上のアイコンセットのうち、使いたいアイコンの下にある「ADD TO COLLECTION」をクリックします。

アイコンを何も選択していない時、「Use selected fonts」欄はこんな感じですが……

アイコンを選択するとimport urlと選択したアイコンのフォントファミリーの指定が表示されます。

次にこれらをCSSに挿入し、フォントファミリーを加えます。

そしてbodyに以下のようにして使いたいアイコンを記入します。上段はアイコンを単体で使いたい時、下段はグループでアイコンを使いたい時の指定の仕方です。

アイコンの名前は都度タイピングしなくても、ページ上で使いたいアイコンをクリックすると……

右上に名前が表示されるので、右クリックしてアイコンの名前は簡単にコピー可能です。

実際にアイコンを使ってみます。HTMLは以下のような感じ。

Twitterバードや花のアイコンなどが表示されました。

なお、サイト上のアイコンは随時追加されていくとのことです。