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

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

2015022101

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

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

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

そんな時に!

オリジナルのアイコンフォントを作成できるWebツール!IcoMoon

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

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

2015022102

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

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

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

2015022103

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

簡単ですね!

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

<span aria-hidden="true" class="icon-logo"></span>

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

【関連記事】

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

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

こういう仕事をしてます

SNSもよろしくね