LoginSignup
0

More than 3 years have passed since last update.

icon moonで好きなアイコンをWEBフォント化する

Posted at

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素材自体の解像度が低い場合はぼやけます、、、)

・画像変更や色などもしやすく管理しやすい

・サイズ調整もしやすく、アイコン付近のテキストとアイコンを合わせやすい

参考

icomoonで好きなアイコンを追加する手順

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0