超便利です。
お手軽にアイコンを追加できるし、拡大しても縮小しても劣化しないし色もスタイルでで指定できる。
便利すぎてWebフォントを使う前にどうやってたのか忘れてしまうくらい。
大きなところではhttp://fortawesome.github.io/やhttp://icomoon.io/なんかが有名でしょうか。
他にもいろいろなものが出ております。
しかし微妙にこういうフォントが欲しいとかこういうアイコンが欲しいということが出てきます。
そこでWebフォントを作ってみました。
手順は２ステップ
１．SVGファイルを作る
２．SVGファイルをフォントにまとめる
とても簡単です。
ですが素材を作る技術やデザインセンスはマイナスなので素材は以下で調達
http://pictogram2.com/
こちらはかなり自由なライセンスとなっております。
こちらからWebフォントにしたい画像をベクターデータで取得します。
（Illustrator Aiというものになります）
ここで取得したベクターデータをSVG形式に変換するためIllustratorで開きます。
（SVG形式にするだけなのでIllustrator以外でも構いません）
複数の画像が入っているのでここではその内の１つを選択して新規にSVGとして保存します。
手順は以下になります。
１．.aiファイルをIllustratorで開く
２．いくつかの画像があるのでその内の１つを選択してコピー
３．Illustrator上で512pxサイズで新規に作成
４．[3]で作成したレイヤーにペースト
５．ペーストした画像のサイズを調整
６．svg形式で保存
この作業をWebフォントにしたいもので繰り返し行います。
一度に出来る方法があるのかもしれませんが、Illustrator初心者なのでチマチマとSVGに変換します。
ここで最初のステップは完了です。
次にSVGファイルをフォントにまとめます。
フォントにまとめるにはいくつかの方法がありますが、http://icomoon.io/でWeb上で行うことが出来ますのでこちらでサクッとWebフォント化したいと思います。
ここでは手っ取り早く画像で解説
１．IcoMoon Appボタンを選択
２．Import Iconsボタンを選択
ここで先ほど作成したSVGファイルを指定します
３．リストを選択します
４．Select All/Noneを選択
ここで先ほどのUntitledSetに表示された画像が全て選択されます
画面の一番下にある「Font」ボタンを選択します
５．HTML上で呼び出す際の名称を指定します
デフォルトだと***600や601といったものになりますのでわかりやすい名称に変えます
ここではkickやkamehamehaといったものに変更
６．Preferencesボタンを選択する
フォントの呼び出し名やclassで指定時の接頭語（Prefix)を指定できます
ここではわかりやすくFontNameを「P2」（HumanPictgram2なので）とします
７．画面下部の「Download」ボタンを選択すると一式ダウンロードされます。
解凍するといくつか出てきますが必要なのは２つ
style.css
fonts/
のみです。
style.cssと同じ場所に以下のHTMLを作成してブラウザーで表示させます。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"></head>
</head>
<body>
<br />
<br />
<br />
</body>
</html>
関連記事
