アイコンフォントのつくりかた

デザイン会社からpsdだけ納品されてて、人出も足りないしエンジニアが自分でアイコン抜き出さないといけない、折角だしアイコンフォントにしよう、なんてことありますよね？

「実はPhotoshopろくに触ったことないんだけど、どうしよう」とか思ってたら意外と簡単にできたので、やり方を共有します。

アセット抽出

まずはPhotoshop CCを使って、アイコンにしたい部分をsvgとして抽出します。

• アイコンにしたいレイヤーを選択
  • レイヤーにまとまっていない場合は、事前にグループ化しておく
• ファイル -> アセット抽出を選択
• 別窓でファイルタイプをsvgに変更する
• 抽出ボタンを押して、後は画面に従って適当な場所に保存する

アイコンフォント化

今回はIcomoonを使います。簡単な編集ができたり、フリーなアイコンが選べたり、色々便利です。

• Import Iconsを押して先ほど抽出したsvgファイルを選択する
• Edit（画面上にあるえんぴつのやつ）を押してからインポートしたアイコンを選択して、大きさなどを調整
  • 調整した後にsvgでエクスポートしてとっておくと、後々便利かも
• Select状態にしてフォント化したいアイコンを選択し、画面下にあるGenerate Fontを押す
• 後ほどクラス名になる部分を変更できるのでやっておく
• Downloadを押すとzipをダウンロードできる

ソースコードに反映

• ダウンロードしたzipを解凍し、fontsファイル以下すべてとstyle.cssを配置する
• style.cssの中身は、fontのファイルパスを調整したり、使いやすいように変更しちゃってもOK

ちなみに、zipの中身をそのままApacheなどが動いている社内サーバとかに配置しておくと、メンバーがいつでも見れるチートシートになって便利だと思います！

まとめ

ということで、わかってしまえば簡単な作業なので、Photoshop初心者な自分みたいな方のお役に立てれば幸いです。