デザインとの相性や使いたいものが同セットになっているかなど少しでも選択肢は多い方が良いので、ダウンロードできるサイトを見つけてはメモしていたのですが、結構な数になってきたのでそれらの整理も兼ねたアイコンフォントについての備忘録です。

有償だけど高品質で種類も豊富みたいなセットもあったりするんですが、今回は基本的にフリーで使用できるもので、国内外合わせると全部で34サイトまとめています。
また、アイコンフォントの使用方法についても簡単にですが紹介するので、まだ使ったことがないけど実装したいという場合はそちらを参考にしてみてください。

アイコンフォントについて

レスポンシブwebデザインが広まったなどをきっかけに、多くのサイトやブログでも取り入れられているのを見かけるようになったアイコンフォント
実際に使用したことがある人ならわかると思いますが、本当に手軽に実装できて且つメリットもいろいろとあるので今後もさらに見かけることが多くなってくるかと思います。

メリット・デメリット

アイコンフォントのメリットとしては代表的なもので以下がよく挙げられています。

  • 画像に比べて軽量
  • 高解像度デバイスなどでも綺麗に表示ができる
  • CSSのみでサイズやカラー変更など可能で、CSS3を使えばシャドウやアニメーションなども容易にできる

正直画像に比べて軽量かどうかはサイズや量などにもよりますし、場合によっては画像より表示が重くなったりとデメリットになる可能性もありますが、どのデバイスでも劣化せずに綺麗に表示できるのとCSSで容易にスタイル変更できるという部分は大きいと思います。

ただ、先述したようにメリットだけでなくデメリットな部分も幾つかあります。

例えば、これはアイコンフォントの種類にもよりますが、フォントがスムーズにダウンロードされなかった場合は意味不明な文字列だけが出てきてしまうことがあったり、IEなど一部のブラウザでは表示させるために少し手を加える必要があることもあるので、それらをあらかじめ考慮した上で導入する必要があります。

使用方法

@font-face {
  font-family: 'fontName';
  src: url('../font/fontName.eot');
  src: url('../font/fontName.eot?#iefix') format('embedded-opentype'),
       url('../font/fontName.woff') format('woff'),
       url('../font/fontName.ttf') format('truetype'),
       url('../font/fontName.svg#webfont') format('svg');
}

上記のようにCSSへ記述することでアイコンフォントを使用できるようになります。
上記をコピーして使用してもフォント名やパスを自身の環境に合わせて変更するのでも問題ないですが、配布サイトによってはダウンロードした際にデモ用のHTMLやCSSが同梱されているものもあるので、そちらからコピー・参考にすることもできます。

使用方法 - Fontelloの場合

例として、以下でTwitterアイコンを「Fontello」のアイコンフォントを使用して実装する方法を紹介します。

アイコンを表示させる方法としては<i class="icon-hoge"></i><i class="icon-hoge">hoge</i>のようにアイコンを表示させるための要素をHTMLに記述するというのもありますが、個人的にこの方法は好きではないので、今回は普段から自分がよく使っている表示させたい要素にclassを指定して、そこに:beforecontentを用いて表示する方法になります。
先述したi要素を使う方法で実装したいという場合は下記の方法を少しいじってもできますが、手っ取り早く知りたい場合はFontelloからフォントをダウンロードした際に同梱されているデモの記述を参考にしてください。

Font AwesomeのTwitterアイコンを選択しているイメージ

まずは「Fontello」にアクセスしてセット内に含めたいアイコンを選択します。
今回は沢山ある中からFont AwesomeのTwitterアイコンを選択し、使用したいアイコンをクリックするとイメージのように選択された状態になります。

「Customize Codes」でアイコンコードを設定できる

使用したいアイコンを選択後、そのままページ右上にある「Download webfont」からフォントセットをダウンロードして使用することもできますが、「Customize Names」や「Customize Codes」のタブでそれぞれ選んだアイコンに任意で名前やコードを指定することができます。

今回はコードを任意で変更したいので「Customize Codes」のタブを選択してわかりやすいようにTwitterの頭文字である「t」を指定し、あとはページ右上にある「Download webfont」のボタンからファイルをダウンロードします。

ダウンロードしたフォントを任意の箇所に格納(今回の例ではfont内に格納しています)し、次に下記をHTMLとCSSにそれぞれ記述します。
ダウンロードした際に同梱されているdemo.htmlにはアイコンを表示したい箇所に<i class="icon-twitter"></i>を記述するという形を用いて実装していますが、下記はそれとは少し違う実装方法になります。

<p class="twitter">Twitter</p>
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot');
  src: url('../font/fontello.eot?#iefix') format('embedded-opentype'),
       url('../font/fontello.woff') format('woff'),
       url('../font/fontello.ttf') format('truetype'),
       url('../font/fontello.svg#webfont') format('svg');
}
.twitter:before {
  font-family: 'fontello';
  content: 't';
  margin-right: .3em;
  color: #00acee;
}

@font-faceを指定後、.twitterに対してfont-familyとFontelloでコードとして設定した「t」をcontentにそれぞれ記述しています。

Twitterアイコンがアイコンフォントで表示されているイメージ

上記を記述後、問題なければイメージのようにTwitterという文字列の横にアイコンが出ているのを確認できると思います。
もっとアイコンを大きくしたければCSSにfont-sizeを追記したり、ホバーしたときにアイコンが回転するとか動きをつけたければtransitiontransformなど使って簡単に動きも付けられます。

海外のアイコンフォントセット

「Fontello」や「Font Awesome」などは多くのブログなどでも紹介されているように汎用性高いアイコンが多くて使いやすいので、自分もよく利用させてもらっています。
(このブログのアイコンも「Fontello」を使用しています)

他にも丸みを帯びた可愛らしい「Batch」や「Typicons」、手書き風の「Handy Icons」、プログラミング関連やSNS・Webサービスのロゴなどが集まった「Pictonic」などもあります。
また、「Fontello」「Fontastic」「IcoMoon」などサイトの中には自分が作成したSVGをアップロードできるものもあり、それらを利用すればオリジナルのフォントセットを作成することも容易にできます。

使用する際は再度ライセンス等を各自で確認してください。

Fontello - icon fonts generator

Fontello - icon fonts generator

Font Awesome

Font Awesome

IcoMoon

IcoMoon

The Elegant Icon Font

The Elegant Icon Font

Foundation Icon Fonts 3

Foundation Icon Fonts 3

Foundation Icon Fonts 2

Foundation Icon Fonts 2

Genericons

Genericons

WebHostingHub Glyphs

WebHostingHub Glyphs

Shock Icon Font

Shock Icon Font

80 Mini Icons

80 Mini Icons

Metro UI CSS

Metro UI CSS

配布終了したようです。

Iconic Icon Set

Iconic Icon Set

MFG Labs icon set

MFG Labs icon set

Elusive-Icons Webfont

Elusive-Icons Webfont

Raphaël Icon-Set via @font-face

Raphaël Icon-Set via @font-face

The Noun Project

The Noun Project

Entypo

Entypo

Modern Pictograms

Modern Pictograms

Sosa

Sosa

Batch

Batch

Typicons

Typicons

OpenWeb Icons... a font!

OpenWeb Icons... a font!

Mono Social Icons Font

Mono Social Icons Font

Pictonic

Pictonic

Handy Icons

Handy Icons

Handy Icons Vol2

Handy Icons Vol2

We Love Icon Fonts

We Love Icon Fonts

Fontastic

Fontastic

国内のアイコンフォントセット

変わったものが数多くある「絵文字フォント - EmojiSymbols Font」、リガチャ文字で使用できる「Ligature Symbols」、他にもはてブやmixiといった国内ソーシャルのアイコンが用意されている国内ならではのフォントセットもあります。
また、使い方やライセンスなども日本語なので確認もしやすいです。

使用する際は再度ライセンス等を各自で確認してください。

Ligature Symbols

Ligature Symbols

Web Icon Fonts

Web Icon Fonts

CONDENSE-iconFont

CONDENSE-iconFont

Free Web Icon Font - PomoCon -

Free Web Icon Font - PomoCon -

絵文字フォント - EmojiSymbols Font

絵文字フォント - EmojiSymbols Font

スタンプフォント!

スタンプフォント!

クローズしたようです。