fontcustomで、アイコンフォントを作ってみる

ruby

fontcustomを使って、サクッとアイコンフォントができました。
これは簡単でいいですね、サービス開発するときにどうしてもアイコンフォンとがしっくりないときにカスタムで作成できますね。

手順は、fontcustomのページ見ればわかる感じなんですが、
とりあえずアイコンのsvgデータが必要です。

1
2
brew install fontforge eot-utils ttfautohint
gem install fontcustom

brewをupdateしてない場合は先にupdateした方がいいかも。
undefined method chomp とかでエラーがでるなら、パスが通ってないかも。

1
source ~/.bashrc

とかで読込みなおしてみた方がいいかも。

あとはアイコンのsvgデータをコンパイルするだけ。

1
fontcustom compile /path/to/vectors

fontcustom とディレクトリが生成され

1
2
3
4
5
fontcustom.css
fontcustom-UNIQUEHASH.ttf
fontcustom-UNIQUEHASH.eot
fontcustom-UNIQUEHASH.woff
fontcustom-UNIQUEHASH.svg

という感じでフォントができました。

cssはというと

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*
  Font Custom - icon webfonts made simple
*/

@font-face {
  font-family: "fontcustom";
  src: url("fontcustom-UNIQUEHASH.eot?#iefix") format("embedded-opentype"),
       url("fontcustom-UNIQUEHASH.woff") format("woff"),
       url("fontcustom-UNIQUEHASH.ttf") format("truetype"),
       url("fontcustom-UNIQUEHASH.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*
  Bootstrap Overrides
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontcustom";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}

/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.333em;
}

/* keeps button heights with and without icons the same */
.btn [class^="icon-"], .btn [class*=" icon-"] {
  line-height: 0.9em;
}

li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

/* 1.5 increased font size for icon-large * 1.25 width */
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
  width: 1.875em;
}

li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}

li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}

li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.333em;
}

/*
  Icon Classes
*/

.icon-yourfilename:before { content: "\f100"; }

とまあ、TwitterBootstrapのスタイルを継承してて、ほんとに何もしなくていいです。
すてきですね。

Comments