WEBサイトを作成する際にオリジナルアイコンを使用したWEBデザインを見かけることがありますよね?
今までは画像で書き出していたのですが、BootstrapのようにWEBフォントでアイコン使えたら便利じゃね?ということに気づき、調べてみたところicon moonというサービスが便利なので備忘録として紹介していきます。
必要な素材
icon moonでWEBフォントを作成するにはSVG素材が必要です。Freeのアイコンを使用するか、Illustratorを使ってSVG素材を書き出します。
アイコンのサイズは指定は特にないのですが、小さすぎるとアイコンが表示されないみたいでだめっぽいので128px×128pxくらいは必要だと思います。
アイコンの色は黒を選択してください。
フリーのアイコンなら以下がおすすめ
フラットアイコンなら
FLAT ICON DESIGN
シンプルモノトーンなら
ICOOON MONO
バリエーションなら
iconmonstr
IllustratorからSVGを作成する方法
こちらに詳しく説明されてます。
【決定版】イラストデータをIllustratorでSVGに(アートボード通りに)書き出す方法。
icon moonにインポート
こちらにアクセスしてください。
https://icomoon.io/app/#/select
1.Import Icons ボタンをクリックしてください。
2.SVGファイルをアップロードしてください。(複数可)
3.ウィンドウ下のGenerate Fontのボタンをクリックします。
4.ダウンロードがはじまるのでそのファイルを解凍します。
5.回答したフォントファイルとstyle.cssをHTMLで読み込みます。
6.style.cssで指定しているclass名をHTML上に記述することでWEBフォントのようにアイコンを使用することができます。
アイコンをWEBフォントにするメリット
・レスポンシブによる画像劣化等の問題が発生しづらい(SVG素材自体の解像度が低い場合はぼやけます、、、)
・画像変更や色などもしやすく管理しやすい
・サイズ調整もしやすく、アイコン付近のテキストとアイコンを合わせやすい