承上一篇，本篇會介紹自己做web fonts icons，讓會手癢的設計師可以自行設計web font icon。
先看看成品
這次的目標是做出七龍珠裡的一星球，使用的繪圖軟體是illustrator，而製作成web font是http://icomoon.io/app 這個網站。
步驟
繪製向量檔
這是illustrator的畫面，用哪套軟體倒是沒什麼關係，只要能夠轉SVG就可以了，但另外有一個重點，如果有用到線段要記得展開，轉SVG比較不會有問題。
存檔的時候，就選SVG就對了。
SVG選項請調整成SVG Tiny。
開始製作webfont
第一個步驟，就是先打開http://icomoon.io/app 的網頁
把剛剛的檔案匯入到這個網站，選import或是直接拖曵檔案到網頁裡皆可。
SVG都匯入後，就可以點網頁下方的Font，這邊就只有一顆一星球。
接下來可以為每個一icon指定一個符號、英文或是數字，在這邊可以注意到我設定的是g，都確定後就點Download吧。
下載後的壓縮檔裡面有完整的範例檔，基本上只要按照範例檔去設定就可以了。
使用自己做的Web font Icon
由他所提供的範例檔可以得知，它的使用方式有兩種，一種是設定data，而另一種是設定Class。而不論是哪一種都必須載入他所提供的@font-face。
/*@font-face 設定*/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
利用Data-icon設定
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
這一個的原理是利用CSS的屬性選取器，選則html標籤裡有data-icon屬性的元素，並利用偽元素新增content，而content的內容會對應data-icon的值。如範例我的data-icon的值為"g"，就是當時設定的一星球。
利用Class設定
.icon-dragonBall {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-dragonBall:before {
content: "\67";
}
這是他所提供的另一個方式，設定Class他就能將指定的圖形載入，這作法也是比較基本且容易的。
而我們也可以單獨把上面的Class拆出來用，直接輸入"g"一樣有效果。
相容性誤解
在上一篇的時候，我有說明到 web-font icon的相容性，在此可能要重新說明一下。上一篇所使用的 web font(ligature_symbols) 和本篇的 web font(icomoon.io) 有些不同。ligature_symbols的web font有再利用CSS3的語法(text-rendering)讓單字可以轉為icon；而本篇(icomoon)的是屬於基本款的web font，大部分的瀏覽器都有支援，造成誤會敬請見諒。