ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

sketch3とIcoMoonでオリジナルicon fontを作ってみる。

こんにちは、日高です。 3回目の投稿となりました。

本日は、弊社サービスで利用するicon fontを作ってみたいと思います。

通常、font awesomeというサービスのフォントを使わせてもらっているんですが、 使いたい形がないことがたまにあるんですね(△とか)

そこで、iconfontではなく"△"を使っていたのですが、どうも違和感があったので、 思い切って作ってみることにしました。

今回使用するのは、sketch3Sketch - Professional Digital Design for Mac というアプリと、icomoonIcon Font & SVG Icon Sets ❍ IcoMoonというサイト。 sketch3に関してはトライアル版( https://sketchapp.com/download/sketch.zip )がありますのでそちらをお使いください。 また、icomoonは無料で使うことができます。

流れ

iconfontを作る流れは、ざっくりいうと

1.sketchでアイコンを作って、svg形式で出力

2.icomoonでiconfont化

3.htmlにcssを読み込む

以上、クルクル トントン サッサッ の簡単3ステップです。 (試行錯誤もありましたが)

ではやってみましょう!

1. sketchでアイコンフォントを作って、svg形式で出力

f:id:yourmystar_engineer:20170327100056j:plain

sketchの使い方は割愛しますが、三角をざっくり2つ描き、 エロイムエッサイム的な感じに目分量で並べてみました。

最後に、左上の+ボタンをクリックし、slice(鋭利な刃物ボタン)を選び、 svgとして出力したい範囲を選択します。

  1. 画面左からsliceを選択
  2. svgを選択
  3. Export Sliceをクリック

f:id:yourmystar_engineer:20170327104431j:plain

すると、svg形式で魔方陣が出力されます。

2. icomoonでiconfont化

icomoon IcoMoon App - Icon Font, SVG, PDF & PNG Generator へアクセスし、 Import Iconsをクリックし、作成したsvg形式の魔方陣を読み込みます。

f:id:yourmystar_engineer:20170327105513j:plain

画面右下の"Generate"をクリックし、ファイルをダウンロードします。

3. htmlにcssを読み込む

ダウンロードしたファイルを解凍し、demo.htmlをブラウザで表示してみましょう。 f:id:yourmystar_engineer:20170327111437j:plain

無事魔方陣を描くことができました!

これで今日から、呪いが捗りますね!

以上です!