IcoMoonを使ってみる

アイコンフォントを手軽に使えるWebサービス「IcoMoon」を使ってみます。

アイコンフォントの作成

IcoMoonにアクセスして、右上のIcoMoon Appをクリックします。

使用したいアイコンを選択します。

独自で用意したアイコンを使いたい場合、左上のImport Iconsからインポートできます。

独自で用意したアイコンを追加できました。
このアイコンもアイコンフォントに含めたいので、選択しておきます。

選択が一通り完了したら、右下のGenerate Fontをクリックします。

アイコンフォントの生成が完了しました。
右下のDownloadをクリックして、ファイルのダウンロードを行います。

使い方

ダウンロードしたファイル内に含まれているstyle.cssとfontsディレクトリーを使用します。
階層構造を維持したまま使用するディレクトリにコピーして、style.cssを読み込ませます。

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

HTML上でclassを指定します。

HTML

<span class="icon-star"></span>
<span class="icon-home"></span>
<span class="icon-pencil"></span>
<span class="icon-camera"></span>
<span class="icon-play"></span>

アイコンフォントの表示を確認できました。
アイコンフォントの使い方のデモページ
　

アイコンフォントの追加・削除

先ほど作成したアイコンフォントから、アイコンの追加や削除を行ってみます。
先ほどダウンロードしたファイルのfontsディレクトリ内にあるicomoon.svgを使用します。

IcoMoonにアクセスして、左上のImport Iconsからicomoon.svgをインポートします。

フォントのメタデータなどを使用するか聞かれるので、Yesを選択します。

使用したいアイコンを選択します。
鉛筆とカメラのアイコンを選択から外して、本のアイコンを追加してみます。

選択完了後、右下のGenerate Fontをクリックします。

アイコンフォントの再生成が完了しました。
先ほどと同様に、右下のDownloadをクリックします。

使うときは先ほどと同様にすればOKです。
アイコンフォントの使い方のデモページ2
　

【参考サイト】

• SVGでアイコンフォントをつくるならIcoMoonがオススメ！ | アンギス
• icomoonで好きなアイコンを追加する手順 – Qiita
• Icon Font & SVG Icon Sets IcoMoon