アイコンフォントを描く時の注意点
スクラッチでアイコンフォントの元になるイラストを描く方法を21時限の中の「3.Scratchでイラストを描く」で解説しました。今回描いて作ったアイコンフォントがこれです→
※スクラッチで描いた物で解説していますが、インクスケープでもイラストレーターでも考えは同じです。
アイコンフォントを描く時に気を付ける5つのポイント
そこでは詳しく書かなかったのですが実はIcomoonに取り込む時に以下の5つのポイントをクリアしていないとちゃんと表示されません。
１.２.３は21時限で説明済みですので残りの４と５を書きます◎
スクラッチで描いたイラストを書き出します。
書き出したファイルをIcomoonのImport Icons で取り込んだら注意が出てしまいました。
「ストローク（線）は無視されます」と注意しています。
とりあえずアイコンを選んで下のボタン、Generate Fontで進むと
イラストがちゃんと表示されていないね
ちょっと見にくいけれど、グレーの部分（目、鼻、ツノ）は表示されていて、黒い丸（体）の部分が表示されていないわね
4.線は表示されないので筆ツールなどで描きます
スクラッチで描いた所までさかのぼると、ちゃんと表示されなかった（黒で表示された）部分は
円ツールの枠線を使って描いた30の太さの「線」＝ストロークでした。
直線ツール、四角形の枠線、円の枠線 は表示されないので注意
線以外のツールで描き直します。
例えば円ツールの中を塗りつぶして、消しゴムツール（Max100まで）で中を丸く消します。
見た目は同じでも右は「太さ30の線」で、左は線ではありません。
「線」が無くなったので、改めてこれをIcomoonにインポートします。
insect2、今回は大丈夫でした。
5.パスを統合しておいた方が安全です？
パスの統合というのは、イラストのパーツをバラバラで無く（水色のように）スッキリ1つにまとめる事です。ただ今回はこれをしなくても大丈夫だったので大きさや細かさにもよるのかもしれません。
以前バッグのアイコンを（イラストレーターで）作った時にこれが原因で綺麗に表示されず修正した経験がありました。
お絵かき機能がシンプルなスクラッチでパスの統合をするのは結構手間なので（もし綺麗に表示されなかったらこの記事を思い出していただくという事で）このままでいいのかもしれません◎
作ったアイコンをダンロードして実際に使う方法
この後、IcomoonでファイルをダウンロードしてWordPressや他で使うやり方は「プログラミング1年生」の21時限、22時限をご覧ください。
21時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_前編
22時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_後編
お疲れ様でした。
