Glyphterを利用したカスタムアイコンフォントの作成と使用方法まとめ


## Glyphterとは
Fontawesomeなど代表的なアイコンフォント16種類から、自分の欲しいアイコンを選んでカスタムアイコンフォントを作成することができるwebサービスです。

自作のSVGファイルを用意して、オリジナルアイコンをフォントの中に追加することも可能です。

http://glyphter.com/

## アイコンセットを作成
### プリセットされたアイコンフォントを使用する場合
右側から使用したいアイコンを選んで、
左側のA, B, Cと表示されている所にアイコンをドラッグ&ドロップしていきます。

![スクリーンショット 2015-01-20 22.35.27.png](https://qiita-image-store.s3.amazonaws.com/0/42958/0d663a5a-e3c7-81b3-71ea-2bb038603bec.png "スクリーンショット 2015-01-20 22.35.27.png")

### カスタムアイコンを使用する場合
左側のアルファベット枠の空欄をダブルクリックするとファイルダイアログが表示されるので、SVGファイルを指定しましょう。
SVGファイルはIllustratorなどで作成できます。複合パスを使用している場合は、パスのアウトライン化を必ず行ってください。
(Dのアイコンがカスタムアイコン)

![スクリーンショット 2015-01-20 23.07.18.png](https://qiita-image-store.s3.amazonaws.com/0/42958/4f74f316-0d31-2357-6f1e-841cfbd99078.png "スクリーンショット 2015-01-20 23.07.18.png")

## アイコンフォントをダウンロード
アイコンの選択が完了したら、画面上部にあるタイトルを入力、 その右にある [FONT] ボタンをクリックしてフォントをダウンロードしましょう。

![スクリーンショット 2015-01-20 23.11.07.png](https://qiita-image-store.s3.amazonaws.com/0/42958/eb4cabe0-eb02-b522-2737-ab3acb915d2a.png "スクリーンショット 2015-01-20 23.11.07.png")


モーダルダイアログが表示されます。
[JUST DOWNLOAD] をクリックでダウンロードがはじまります。
アイコンセットのデータを保存しておきたい場合は、SIGNUPしてください。

glyphter-font.zipという圧縮ファイルがダウンロードされます。適当なツールを利用して解凍してください。

## アイコンフォントのCSSを定義
解凍して出来たファイルのcssフォルダにあるcssファイルを開きます。

![スクリーンショット 2015-01-20 22.48.34.png](https://qiita-image-store.s3.amazonaws.com/0/42958/c7eaafc4-7ed0-6c62-6bef-ea08861e628d.png "スクリーンショット 2015-01-20 22.48.34.png")

素のCSSだと@font-faceの定義だけなので、各アイコンのスタイルを追記していきます。

```css:customfont.css
/* Generated by Glyphter (http://www.glyphter.com) on  Tue Jan 20 2015*/
@font-face {
    font-family: 'customfont';
    src: url('../fonts/customfont.eot');
    src: url('../fonts/customfont?#iefix') format('embedded-opentype'),
         url('../fonts/customfont.woff') format('woff'),
         url('../fonts/customfont.ttf') format('truetype'),
         url('../fonts/customfont.svg#customfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
```
Fontawesomeのcssを参考に要素の:beforeにアイコンが表示されるようにしました。
content: "A"; の部分はGlyphterでAに配置したアイコンと対応しています。

```css:customfont.css
@font-face {
    font-family: 'customfont';
    src: url('../fonts/customfont.eot');
    src: url('../fonts/customfont?#iefix') format('embedded-opentype'),
         url('../fonts/customfont.woff') format('woff'),
         url('../fonts/customfont.ttf') format('truetype'),
         url('../fonts/customfont.svg#customfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
.cf {
    display: inline-block;
    /*末尾のfontfaceの指定をカスタムフォントに*/
    font: normal normal normal 14px/1 customfont;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cf-tv:before {
    content: "A";
}
.cf-globe:before {
    content: "B";
}
.cf-apple:before {
    content: "C";
}
.cf-star:before {
    content: "D";
}
```

## HTMLからアイコンフォントを表示する

cssファイルで定義したclassを指定するとアイコンフォントが正常に表示されます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>アイコンフォントの表示テスト</title>
    <link rel="stylesheet" href="css/customfont.css">
</head>

<body>
    <div class="cf cf-tv"></div>
    <div class="cf cf-globe"></div>
    <div class="cf cf-apple"></div>
    <div class="cf cf-star"></div>
</body>

</html>
```
![スクリーンショット 2015-01-20 23.24.40.png](https://qiita-image-store.s3.amazonaws.com/0/42958/0b344a18-171d-b061-5c04-ca5112927828.png "スクリーンショット 2015-01-20 23.24.40.png")

## 2015-01-23 追記
[icomoon](https://icomoon.io)という類似サービスがあります。
こちらのほうがCSSを自動生成してくれて、手軽に組み込めるのでオススメです。