デザイン

無料でウェブ上で使えるアイコンがセットになった「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バードや花のアイコンなどが表示されました。


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

この記事のタイトルとURLをコピーする

・関連記事
無料で商用利用も可能な826種類の絵文字のWebフォント「絵文字フォント」 - GIGAZINE

無料でアイコン・グラフィック素材などをダウンロードできる「Icon Deposit」 - GIGAZINE

無料で商用利用可な2400種類のアイコン集「Farm-Fresh Web Icons」 - GIGAZINE

無料で商用利用も可能なシンプルかつカラフルなアイコン96種類「Icecreamcons」 - GIGAZINE

2万個以上のPNG形式画像のアイコンを見つけることができる「PNG Factory」 - GIGAZINE

無料でダウンロードできる多種多様なアイコン・ボタン・UIキットいろいろ - GIGAZINE

in デザイン, Posted by logq_fa

You can read the machine translated English article here.