WAVE Log
IcoMoon

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

Webアイコンフォントが作成できます。

オリジナルで作成したアイコンの SVG データをアップロードするだけでフォントファイル化してくれます。
また、IcoMoon のフリーアイコンの中から好きなものを選んでフォント化することもできます。

「Import Icons」から SVG データをアップロードしたり、「Add Icon From Library…」から好きなフリーアイコンを探して選択します。(他で作成,取得した SVG は黒色にします)

右下の「Generate Font」をクリックします。

名前(sun)および数値(e900)は必要であれば編集可能です。
右下の「Download」をクリック。
ダウンロードした zip ファイルを解凍すると内容は以下のようになっています。

「demo.html」をブラウザで見ると以下のように表示されます。

名前はデフォルトで「ico-」の接頭辞が自動に付きます。

サーバへアップロードが必要なものは「style.css」と「fontsフォルダ(と中身)」だけです。
「icomoon」などと名前を付けたフォルダに入れてフォルダごとアップロードすると管理が楽だと思います。

【表示方法】

1)<head>~</head> 内で「style.css」を取り込む。

<link rel="stylesheet" href="./icomoon/style.css">

(パスは環境に合わせてください)

2)表示させたいところに以下を書く。

・「名前(icon-sun)」を使う場合。

<span class="icon-sun"></span>

・「数値(e900)」を使う場合。

<span class="number">&#xe900;</span>

class 名は任意。数値の前に「&#x」を付加。
「数値」を使う場合は、スタイルシートで font-family を指定する必要があります。

.number { font-family: 'icomoon'; }

IcoMoon App の場合、作成したプロジェクトやアップロードした SVG は、ブラウザキャッシュにより保持されるので、時間をおいてアクセスしても引き続き追加や編集が可能ですが、異なる環境やキャッシュがクリアされた場合でも、「selection.json」を「Import Icons」からインポートすることで、アイコンフォントの情報がそのまま使えます。