47
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Sketchでiconフォントを使う

Posted at

##はじめに
以前はiconをCSS Spriteにして使用していましたが、iconフォントを使うとCSS Spriteには戻れなくなります。

デザインする場合もsketch-iconfontを使うことで、より簡単にiconフォントを使ってデザインすることが出来ます。

今後はiconを作ることすら無くなってしまって、私のようなオジサンは世間からも家庭からもいらなくなるでしょう。

##使用方法

sketch-iconfontの使用方法は簡単です。

####1. sketch-iconfontをダウンロード

こちらからsketch-iconfontをダウンロードします。
ダウンロードしたファイルを解凍し、「iconfont.sketchplugin」をダブルクリックしてプラグインをインストールします。
※Sketch ToolboxからインストールしてもOKです。

####2. font-bundlesをダウンロード
こちらからfont-bundlesをダウンロードします。

ダウンロードしたファイルを解凍して、「ttf-files」の中にあるフォントをダブルクリックしてインストールします。

###3. Sketchにbundleファイルをインストールする
Sketchを開きメニューのPluginsから「Icon Font」を選択します。
メニューの中にある「Install a Font-Bundle」を選択し、手順2でダウンロードした、 「font-bundles-master」 フォルダを選択します。

CXV6LUnWsAEtP3_.png

###4. Sketchでiconフォントを使う
Sketchを開きメニューのPluginsから「Icon Font」を選択します。
メニューの「Grid Insert」を選択し、使いたいフォントを選択します。

2.png

あとは、好きなアイコンを選択すればOKです。

3.png

###その他
フォントなので、アウトラインをとることもできて後から編集もできます。

4.png

###終わり
iconフォントを使うことで、デザイン作業の圧縮だけでなくコーディングも楽になるので、オリジナルを作りたいという気持ちは抑えて使っていきたいと思います。

47
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?