1,700ものアイコンから自分好みのアイコンフォントを作成できる「Fontastic」

  • 2013-06-23 (日) 8:00
  • Tool

「Fontastic」は1,700以上ものアイコン郡の中から自分が必要なものだけを選び、フォント化してくれるWebサービスです。

Fontastic

screenshot300

1,700もアイコンがあればデザインの好みの問題はさておき、欲するアイコンは見つかる可能性が高いですね。基本的にシンプルなデザインで汎用性の高いアイコンがそろっています。少し眺めてみましょう。

基本といったアイコンですね。

screenshot301

 

ソーシャルアイコンです。多くのWebサービスのアイコンがそろっています。

screenshot302

 

Mapアイコンです。まぁ日本向けではありませんが、使えそうなものはありますね。

screenshot303

 

「Fontastic」の使い方を簡単にご紹介。まずはフォントに含めたいアイコンを選択します。矢印のアイコンを4つ選択してみました。すると”DOWNLOAD”の箇所に4と表示されます。

screenshot305

 

次に”CUSTOMIZE”を選択しましょう。”CHARACTER MAPPING”ではアイコンを使用する際に用いる文字を指定します(アイコンフォントとは文字をアイコンに変換するものです)。”a”と打つと下向き矢印アイコンが表示されるわけですね。”CSS CLASS MAPPING”はその名の通り、アイコンのクラス名です。まぁここら辺はデフォルトでもいいかと思います。

screenshot306

 

最後に”DOWNLOAD”を選択しましょう。手順が記載されていますが、基本的にはzipファイルをダウンロードしてしまえばOKです。マークアップ例、CSS共にそろったファイルが提供されています。好きなアイコンを選ぶだけでこのサービス、とても便利ですね。

screenshot308

 

一応マークアップ例をご紹介しておきます。ダウンロードしてきたstylesheetを読み込みましょう。

<link rel="stylesheet" href="styles.css">

 

HTMLはこのようにマークアップします。

<div class="icon-arrow-circle-1-down"></div>

 

文字を打っていないのに記号が表示される理由は、CSSのbefore擬似要素contentで文字を挿入しているからです。アイコンの大きさを変更させるときは”font-size”を使います。

.icon-arrow-circle-1-down:before {
  content: "a";
  font-size: 2em;
}

 

するとこのようにフォントを表示させることができました。

screenshot309

アイコンやアイコンフォントは必要とするアイコン以外のその他多くのアイコンもダウンロードしなれければならず、目的のアイコンを探すのが手間だったり容量がかさばったりで不便です。「Fontastic」はそんな不便を解消してくれるすばらしいWebサービスです。アイコンを後からフォントに追加することも出来ますし、自作のアイコンもアップロードすることができます。アイコン管理も「Fontastic」で出来てしまいますね。ぜひ参考にどうぞ。

 

Home > Tool > 1,700ものアイコンから自分好みのアイコンフォントを作成できる「Fontastic」

Return to page top