東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

自作webアイコンフォントのつくりかた

illustratorなど使ってアイコンフォントにしたいものをsvg画像で保存。また、
http://www.webcreatorbox.com/webinfo/svg-tools/

ここでも紹介があるような画像をsvgに変換するツールもある。私はpotrace.jsを使っている。
potrace.jsはネット上でsvgデータを描きだしてくれるのでそれをテキストエディタにソースを貼り付けて保存すればsvgデータが完成する。画像をsvgにする際はなるべく大きい画像の方がsvgにしたときに忠実に再現される。大きさは後でいくらでも調整可能。



②icomoonというサイトでアイコンフォント化する。

https://icomoon.io/

このサイトの右上の赤いボタン「icomoon app」をクリック


③その次に左上の紫のボタンクリックし、フォント化するものを選択しアップロード。そのあとフォント化したいものを選択し、光らせておく。


④画面右下のgenerate fontをクリック

⑤そしてまた画面右下のdownloadをクリック。これでアイコンフォントのデータが手に入る


⑥ダウンロードしたフォルダの中にあるstyle.cssをサイトで適用させる。

⑦fontsというフォルダをサーバーに上げる。そしてstyle.cssに記述されてある@font-faceのfontsフォルダへのパスを合わせる。

⑧htmlを記述。アイコンフォントにしたものにカーソルをあわせ、「get code」をクリックするとhtmlソースが書き出されるのでそれを貼り付け。


【注意】
・icomoonで2回にわけてダウンロードして同じサイトで使う場合cssはまるまるふたつとも適用してOK。

・アイコンフォントを使ったよくある見出しのデザインで

<アイコン> 見出しの文字

という横並びの場合は、アイコンフォントを以下のようにcssで位置調整。

.icon-class{

font-size: 30px;
  position: relative;
  top: 8px;
  color: #3F1E19;
  margin-right:10px;
}


【参考URL】

http://10251.net/original-icon-font