1、什么是iconfont？
說白了就是用圖標制作而成的一套字體文件，本質是一個字體文件（擴展名是ttf\woff\svg的文件）。它是用來制作網頁常用小圖標的一種方法。以下是天貓首頁使用iconfont的場景：
2、用iconfont有什么優缺點？
1）文件小，以往常用的sprite圖如果要放上上百個圖標，那么這張圖的大小可能有100k+，而上百個圖標做成的iconfont文件，往往只有十幾k
2）可縮放，因為是矢量的字體文件，因此不像sprite圖放大到一定尺寸了圖片失真嚴重
3）缺點：只能使用單色，畢竟只是個字體嘛
3、如何制作iconfont字體文件？
首先你需要安裝2個工具，一個是Adobe的illustrator，一個是FontLab studio（點擊下載）。
illustrator是用來打開設計師給你的eps矢量文件的，而FontLab則是字體制作工具。下面來看一下使用方法：
1）復制圖形。打開illustrator，把設計師做好的圖標的eps文件打開，點擊選擇工具，在畫布中選擇整個矢量圖形，按下ctrl+C復制圖形，如圖：
2）創建字體文件。打開FontLab，選擇 文件>新建，打開一個新字體編輯文件，雙擊任意一個字符打開該字符的編輯器，如圖：
3）粘貼圖標。然后將你在illustrator中復制出來的圖標，按ctrl+V粘貼到FontLab中的字符編輯器中，並用左側的工具欄移動或者調整縮放（快捷鍵ctrl+9）至合適的位置
4）導出字體。點擊 文件>生成字體，將編輯好的字體文件導出成字體，一般選擇ttf格式保存。（如果你的FontLab未注冊，那么會提示你無法保存，破解的方法請自行百度，此文不贅述）
字體文件生成並保存后，就生成了如下圖這樣的字體文件，它的大小只有3k左右（你還可以繼續添加圖標，但k數不會增長太大）
4、如何在代碼中使用iconfont？
1）引入CSS。首先我們要先把這個字體文件引入css，由於不同瀏覽器對字體文件支持不同，因此需要將ttf格式轉成不同格式的字體文件來兼容。字體文件轉格式網上有許多線上轉換的工具，我常用的是這個：http://www.freefontconverter.com/
引入代碼如下（不同格式的文件使用的語法不同，這點我也還沒搞太清楚，先參照前輩的寫）：
@font-face {
font-family: 'star';
src: url('star.eot'); /* 兼容IE9*/
src: url('star.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */
url('star.woff') format('woff'), /* 兼容chrome、firefox */
url('star.ttf') format('truetype'), /* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('star.svg#uxiconfont') format('svg'); /* 兼容iOS 4.1- */
}
2）使用iconfont。在需要使用圖標的地方，通過偽元素來運用iconfont，例如：
.something::before{
font-family:"star";/*上面引入字體文件的命名*/
content:"A";/*我們的圖標在字體文件中占了A的位置*/
font-size:14px;
color:#000
}
附：目前主流瀏覽器對於icon font的支持如下：
IE：從IE4開始支持eot格式，IE9開始支持woff。
webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字體； Safari5.1+ 開始支持woff格式
Chrome：除webkit支持的以外，從Chrome 6開始，開始支持woff格式；
Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；
Opera：支持.ttf、.otf、.svg。 Opera 11開始支持woff；
iPad, iPhone and Android 3.0+ 支持SVG fonts。