【GIMP2】IcoMoonでwebアイコンを自作する方法

投稿日:

まだ解決できてない問題があるけど、とりあえず自分用メモ。

webフォントでアイコンは便利ですが、欲しいアイコンがなくて自作したい時がありますよね。
自作するにはSVGファイルが必要ですが、ググってみたところillustratorという有料ソフトでの作成方法しか見つけきれませんでした。
アイコン作るだけなのに有料ソフト買うのもな~!
と思って私の愛用する無料の画像編集ソフトGIMP2で作る方法をご紹介します。

GIMP2でIcoMoonのwebアイコンを自作する方法

  1. GIMPを開いて400×400pxで新規作成(正方形なら好きなサイズでOK)
  2. 白黒で欲しいアイコンのデザインをする
  3. 完成したデザインが画像の場合:選択→色域を選択(又は右クリックして不透明部分を選択でもOK)、選択→選択範囲をパスに
  4. 完成したデザインがテキストの場合:レイヤーを右クリック→テキストをパスに
  5. パスダイアログに新たなパスが出来ているのでパスを右クリック→パスをエクスポート
  6. このとき拡張子を必ず.svgにして保存します
  7. 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ファイルに境界線(ストローク)を含めずにアウトライン化しろってことらしい。
どうやら私は境界線のままインポートしたからダメだったようで・・・アウトライン化とは何ぞや。

線をアウトライン化する方法が意味分からんので中断してるけど、解決したら追記します。
中途半端な情報ですまない。

-webデザイン
-, ,

Copyright© NOJOY,NOLIFE!! , 2018 All Rights Reserved Powered by AFFINGER4.