第一步
在AI中畫好矢量圖，或者是在PS中將純色的圖片存成PNG格式，最好是放大很多倍的純色圖片。因為導入到fontcreator中會顯得很小，如果不是矢量，圖片拉大后就會有鋸齒狀。
第二步
選中AI中的矢量圖形復制，打開fontcreator，選擇一個已經安裝過的字體或是選擇新建工程，這里采用新建工程來演示。
一般前幾個空着的不要動，選擇A后點擊插入字形就會有這樣一個空白的格子，選擇這個空白的格子右鍵
右鍵然后選擇屬性，代碼點里可以從$E000開始往后寫，寫完后記得點擊右邊的閃電標志，進行檢索匹配，如果沒有被占用則這個代碼點就可以用,名稱里可以填寫自己想要填寫的名字。最后按應用，然后雙擊這個空格開始編輯，記得編輯完后，在屬性里將左右邊軸設置為0，這樣才可以在頁面顯示出來。
完成后的狀態如下
該字體的unicode碼是$F112，名稱是NAME
做完之后導出字體，在fontcreator中可以導出woff及otf格式的字體，如果需要支持其他瀏覽器，則選擇線上轉換字體格式。
第三步
在css中引用字體
@font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('emotion.woff') format('woff'), /* chrome、firefox */ url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */ } .equip-icon{ font-family:"emotion"; }引用完之后可以在CSS里使用偽類這樣寫
.equip-icon:before { content: "\F112"; }
實際頁面效果如圖，忽略底下的藍色圓，這塊黑色的才是。(￣▽￣”)
然后就愉快的使用吧，iconfont適合純色的小圖標，個人覺得比較適合移動端界面的設計。
圖標字體(IconFont)制作
圖標字體(IconFont)介紹
圖標字體(IconFont)現在越來越被廣泛使用，大大提高了網頁的多樣化，解決了視網膜屏幕失真的問題。 據說微軟從IE4開始支持的這個私有方法(@font-face)，后來W3在CSS2中也引入這個方法，但是后來CSS2.1又被刪除了，真是遺憾。直到CSS3，又一次引入，這真是個好消息。
詳細見：http://www.w3.org/TR/css3-fonts/。
不過經常會被問到，移動端用沒問題，PC上IE可以了，我可以負責任的說：當然可以。原因上面說了，@font-face最初是微軟IE里的私有方法，所以從IE4開始已經支持（我沒測過哦），不過現在網站最低支持到IE6而且IE6已被優雅降級到可以正常瀏覽、使用網站，UI還原度已不值得花大力度去做兼容了，況且在實際項目中IE6中使用確實是沒問題的。
一句話，現在可以放心大膽的在PC、移動端使用圖標字體(Iconfont)了。
了解更多可看國內最大最全的適量圖標庫阿里IconFont網站。
圖標字體(Iconfont)制作
一. IcoMoon
這個教程一搜一大把，是很方便快捷的一種方式，提供上傳、編輯或者選擇IcoMoon-Free下載可以直接拿來用了。
網址：https://icomoon.io/app/
二. 阿里IconFont
和IconFont提供類似功能
網址：http://iconfont.cn/
上面兩種方法優點是方便快捷，但或許有時候並不能滿足你的個性化需求。
比如：僅需要替換一個已經有圖標並保持字符代碼不變或者更多個性化需求的，或許你可以看看下面的方法。
三. 字體編輯軟件制作
- 首先准備一下軟件，除了PS，AI，還需要High-Logic FontCreator。 FontCreator 是一個強大的字體編輯軟件。 官網下載：http://www.high-logic.com/font-editor/fontcreator/download.html
-
PS導出圖標路徑到AI (圖標一定要是路徑)
-
AI打開導出的圖標路徑（打開有可能是空白，可以全選找到並添上顏色）
-
打開FontCreator，新建或打開字體
-
添加圖標字形或者雙擊要編輯的圖標字形
-
從AI里復制圖標路徑到FontCreator里，調整大小位置
可參考(http://mux.alimama.com/posts/1025)
-
導出字體，只有TTF和WOFF兩種格式
-
去EverythingFonts把TTF轉換SVG和EOT， TTF2SVG TTF2EOT
-
好了，收工。