まだ解決できてない問題があるけど、とりあえず自分用メモ。
webフォントでアイコンは便利ですが、欲しいアイコンがなくて自作したい時がありますよね。
自作するにはSVGファイルが必要ですが、ググってみたところillustratorという有料ソフトでの作成方法しか見つけきれませんでした。
アイコン作るだけなのに有料ソフト買うのもな～！
と思って私の愛用する無料の画像編集ソフトGIMP2で作る方法をご紹介します。
GIMP2でIcoMoonのwebアイコンを自作する方法
- GIMPを開いて400×400pxで新規作成（正方形なら好きなサイズでOK）
- 白黒で欲しいアイコンのデザインをする
- 完成したデザインが画像の場合：選択→色域を選択（又は右クリックして不透明部分を選択でもOK）、選択→選択範囲をパスに
- 完成したデザインがテキストの場合：レイヤーを右クリック→テキストをパスに
- パスダイアログに新たなパスが出来ているのでパスを右クリック→パスをエクスポート
- このとき拡張子を必ず.svgにして保存します
- SVGファイル完了！
このSVGファイルをIcoMoonに追加するだけでオリジナルアイコンが使えるはずです。
ちなみに
自作しなくても、こちらなら商用利用可能で素敵なアイコンが6000種類もあります。
http://icooon-mono.com/
SVGファイルでダウンロードして、追加すれば使えます。
導入は、zipファイルを解凍してfontsフォルダを丸ごと子テーマ内にアップロードし、style.cssは全部子テーマにコピペします。
間違っても元から子テーマにある方のstyle.cssを上書きしないようにしてくださいね！
それから、アフィンガー4はfontawesome（http://fontawesome.io/icons/）は標準装備されていますので、そもそもfontawesomeのアイコンで足りる方はこちらだけでOKです。
未解決の問題
私が半日ぐだぐだした点をメモ。いまだ解決できてない。
SVGファイルをIcoMoonにインポートしたらエラーメッセージが出たよ・・・
Strokes get ignored when generating fonts or CSH files.
You may convert them to fills and reimport your SVG(s).
「フォントやCSHファイルを生成するときにストロークが無視されるから塗りつぶしに変換してからSVGを再インポートしてね」ってことらしいけど・・・？？？
ググったけどなかなか情報が出ず、つまりSVGファイルに境界線（ストローク）を含めずにアウトライン化しろってことらしい。
どうやら私は境界線のままインポートしたからダメだったようで・・・アウトライン化とは何ぞや。
線をアウトライン化する方法が意味分からんので中断してるけど、解決したら追記します。
中途半端な情報ですまない。