fontawesomeなどのアイコンフォントは便利ですが、足りないアイコンがあることもしばしば。そんな時に便利なのがIcoMoonです。
icomoonを使うと、必要なアイコンをセレクトしてオリジナルのフォントを作成できるので、ファイルサイズが大きくなりすぎることもありません。
https://icomoon.io
IcoMoonの一番簡単な使い方
- トップページ右上の「IcoMoon App」を押します。
- searchで使いたいフォントを探して選ぶか、Add Icons From Libraryから好きなアイコンセットを追加します。
- 右下の「Generate Font」を押します。
- 「Download」でオリジナルのフォントセットをダウンロード。これだけ！
IcoMoonの使い方・発展編
IcoMoon内にないアイコンを追加する
IcoMoon内にはないアイコンも、Selectionの左上の「Import」を押して、SVGファイルを選んでインポートすれば使えます。
他のアイコンフォントと組み合わせやすいアイコン素材サイト
icomoonに有名なアイコンフォントのセットはたいてい入っていますが、それでも足りない時にはフリーのアイコン素材をSVGでダウンロードし、それをicomoonにインポートして使うことができます。
icoon-mono
http://icooon-mono.com
6000種類以上のアイコンがあります。
日本の方が作ってるみたいで、温泉や和食など日本特有のものもかなりあります。
icon-rainbow
http://icon-rainbow.com
こちらも日本の方が作ってるみたいで、アイコンのセンスが日本人の感覚に合います。
iconmonstr
https://iconmonstr.com
4000種類以上のアイコンがあります。海外ですが、ポップなテイストで使いやすいです。
シルエットAC
https://www.silhouette-ac.com/
とにかく色々な種類のシルエットがあるので、特殊なものもかなり見つかります。
色々なクリエイターの作品が含まれているので、テイストがばらつく可能性がある点は要注意です。
アイコンの位置やサイズを調整する
様々な種類のアイコンフォントを使うと、枠に対してのアイコンのサイズが小さかったり大きかったりすることがあります。
- メニューからエンピツマークを選択・編集したいアイコンを選ぶ
- アイコンの編集ウインドウが開き、編集できます。

左から
- Rotate/Mirror（回転・反転）
- Move（移動）
- Scale（拡大縮小）
- Canvas/Alignment（キャンバス幅の変更/配置）
- Color（色：SVGをインポートした場合に元SVGに色がついている場合、色を抜くことができる）
アイコンのクラス名を変更する
アイコンの位置やサイズの変更の際と同じ、アイコン編集画面を出すと、「Names」という項目があります。ここにある名前が、cssでアイコンフォントを指定する時のクラス名になります。
「Generate Font」画面で各アイコンの右に表示されている名前も同様です。
クラス名は複数指定することも可能です。
icomoonでフォントを作った時に注意したい点
ダウンロードしたフォルダ内にある、selection.jsonファイルは大事に取っておきましょう。
後々、作ったアイコンフォントの内容を変更したい場合に、IcoMoonApp側でしばらくはブラウザキャッシュでデータを取っておいてくれますが、キャッシュが消えた場合には左上メニュー>Manage Project>Import Projectでselection.jsonを読み込むと、過去のアイコンフォントセットを再編集することができます。
（これがなくて復活させようとするとすごく大変なので泣くことになります）
以上です。