Blog article

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

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

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

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

そんな時に!

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

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

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

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

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

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

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

簡単ですね!

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

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

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

【関連記事】

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

こういう仕事をしてます