Blog article
投稿日:
2015.02.20
更新日:
2019.08.22

IcoMoonでオリジナルアイコンフォントを作成!

2015022101

PCサイトではきれいに見えるのにスマホで見たら画像がぼやけて見える…

PCでもRatina採用ディスプレイではぼやぼやしてる‥.

など、当たり前にいろんな解像度のメディアがあるので画像をそのメディアに合わせて作成…コレが結構手間。
そして、世界共通であるSNSサイトのを取り扱っているサイト。でも、日本のアプリのアイコンが無い…

そんな時に!

のアイコンフォントを作成できるIcoMoon

デコルでもモバイルサイトに対応したレスポンシブを採用したサイトには、わりと使用します。

サイト右端にある+IcoMoon appをクリックするとウェブ上でSVGを読み込んでオリジナルのアイコンフォントを作成できます。

2015022102

そんなわけで、デコルアイコンフォント作ってみました。

まずはイラレでSVGファイルを作成

それを、IcoMoon appで読み込みます。

2015022103

後は右下のフォントダウンロードでPCにダウンロードするだけ。

簡単ですね!

そして、サイトに設置した時にはダウンロードした内のフォントフォルダと、スルシートをFTPでアップロードして任意の場所に下記のタグを設置。スタイルシートのコードは任意のcssにコピペしても大丈夫です。

See the Pen qEowmK by Tomoyo Shinonome (@tomochi) on CodePen.

【関連記事】

アバター画像
この記事を書いた人:しののめ
ディレクター・デザイナー・イラストレーター

こちらの記事もオススメです

こういう仕事をしてます

SNSもよろしくね