こんにちは。太朗です。
最近案件で使ったアイコンフォントが便利だったのでご紹介致します。

アイコンフォントのメリット

スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！

アイコンフォントをgulpで作る

では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。

以下がgulpファイルの例です。

'use strict';

gulp = require 'gulp'
$ = require('gulp-load-plugins')()

# svg を圧縮する
gulp.task 'svg-min', ->
  gulp.src ['./app/icons/*.svg']
    .pipe $.svgmin()
    .pipe gulp.dest './app/icons'

# アイコンフォント生成
gulp.task 'fonts', ['svg-min'], ->
  gulp.src ['./app/fonts']
    .pipe $.clean()

  gulp.src ['./app/icons/*.svg']
    .pipe $.plumber $.util.log

    # scss ファイルを生成
    .pipe $.iconfontCss
      fontName: 'icon-font'
      path: './app/styles/templates/_icons.scss' # _icon.scss のテンプレート
      targetPath: '../styles/global/_icons.scss' # _icon.scss を生成
      fontPath: "../fonts/" # _icon.scss で使うフォントのパス

    # icon font を生成
    .pipe $.iconfont
      fontName: 'icon-font'
      appendCodepoints: false

    .pipe gulp.dest './app/fonts'

{
  〜略〜
  "devDependencies": {
    "coffee-script": "^1.7.1",
    "gulp": "^3.8.10",
    "gulp-clean": "^0.3.0",
    "gulp-iconfont": "^1.0.0",
    "gulp-iconfont-css": "0.0.9",
    "gulp-load-plugins": "^0.5.2",
    "gulp-plumber": "^0.6.3",
    "gulp-svgmin": "^1.1.0",
    "gulp-util": "^2.2.17",
    "lodash": "^2.4.1"
  },
  〜略〜
}

test
  ┝ app
  │ ┝ fonts
  │ ┝ icons
  │ │  └ *.svg
  │ └ styles  
  │    └ templates 
  │       └ _icon.scss
  ┝ gulpfile.coffee  
  └ package.json

ファイルを作るのが面倒な方にサンプルファイルを用意しました。
app/styles/templates/_icons.scssのファイルはここを参考にしています。

準備ができたら以下のコマンドをターミナルで実行します。

gulp fonts

すると下記画像のようにapp/fontsへフォントファイルが生成されています。
また、app/styles/global/_icon.scssにアイコンフォントを使えるscssファイルも生成されていると思います。

gulp-iconfontに書いてあるとおりsvgファイルは高さ500 に揃える必要があるので気を付けてください！

何かご質問・ご指摘などありましたら、Twitterまでよろしくお願いいたします！