STAFF BLOG スタッフブログ

気軽に使えるアイコンフォントまとめ

今流行りのモバイルファーストや、フラットデザインを考えていく上で使えそうなアイコンフォントについてまとめてみました。

■そもそもアイコンフォントとは

アイコンフォントは、WEBフォントにテキストではなく、アイコンを表示させたものです。
(※”WEBフォント”はページ中の文字の表示に利用するフォントデータをWEB上の指定されたアドレスからダウンロードし、適用できるようにしたCSSの技術です。)

■使うメリット・デメリット

メリット

  • 画像で表示するよりも軽い
  • 1ファイルにまとめるのでリクエスト数を減らせる
  • ベクターファイルなので、高解像度デバイスでもきれいに表示できる
  • CSS3でサイズ、色、陰、アニメーションなどを簡単につけることができる
  • 既存のアイコンを使えば作る手間が省けたり、CSSで簡単に装飾できる分作業効率がアップする

デメリット

  • IE6、7など古いブラウザーでは使えないものもある
  • フォントファイルがダウンロードされなかった場合、
    本文とは関係ないアルファベットが表示されることもある

■どういうところで使われてるの?

最近出たWordpressのデフォルトテーマ「Twenty Thirteen」でもアイコン部分で使われてます。

Twenty Thirteen

WordpressではGenericons というWordPressの開発元であるAutomatticが配布しているフリーのアイコンフォントが使われてます。

この他にもレスポンシブのサイトや、フラットデザインのサイトなどで、使われているケースが多いです。

■アイコンフォント配布サイト

無料でもクォリティの高いフォントがいくつかあるので紹介します。

Font Awesome

Font Awesome
Twitter Bootstrapに入っている画像をWebフォントとしてファイル可してます。

Ligature Symbols

Ligature Symbols
日本人が作ってるということもあり、hatena、mixi、mobage、greeといった他にはないアイコンがそろってます。

Typicons

Typicons
丸みがかかったかわいらしいアイコンです。

Batch.

Batch.
ダウンロードファイルにSVG、PNG、PSDファイルがついてます。

ZURB

ZURB
よくWEBでみかけるアイコンの他にもアクセシビリティセットなどもついてて種類が豊富です。

■便利なサービス

自作のアイコンをアイコンフォントに変換したり、使いたいアイコンだけを選びフォントデータとして作成することもできます。

Iconvault

130820_img06

Illustratorなどを使ってSVG形式で作った自作アイコンをアップロードするだけでアイコンフォントに変換してくれます。

IcoMoon

130820_img07
自作アイコンをアップロードして変換してくれるだけでなく、
使いたいアイコンを選んでフォントデータを作成することができます。

Fontello

130820_img08
これも使いたいアイコンを選んでフォントデータを作成することができます。
ライセンス表記がしっかりしていてるので安心ですね。

Fontastic.me
130820_img10
アイコンフォントに割り当てられている文字コードやCSSのクラスを自分でカスタマイズできます。
Webフォント一式とCSS、HTMLがダウンロードできるので反映に困ることは無さそうです。

Font Custom
130820_img09
コマンドラインでSVGやEPSファイルをいれたフォルダを監視しフォントに自動変換してくれます。
変更があるたびにCSSも反映してくれるみたいです。便利!

■更にCSS3の装飾を加えてみる

アイコンフォントにCSS3の装飾を加えることで、よりリッチなかんじになります。
詳細は参考サイトをご覧ください。

参考サイト

おなじみのアイコンはもちろん結構マニアックなアイコンもあり、眺めているだけでも楽しいですね。
サイトなどを作るときに参考にしてみてはいかがでしょうか。
上記にあげたアイコンフォントについては商用利用OKなものもありますが、使用するときは念のためライセンスを確認してからお使いください。

INDEXブログ一覧へ
CONTACTお問い合わせはこちら