矢量圖標替換教程
首入：

http://www.ebingou.cn/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}

這一段代碼 注釋掉，如下

/*字體圖標區(qū)域
@font-face {
font-family:fp-font;
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}*/

然后在 style.css 很底部 添加 以下代碼

@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale; padding-left:20px
}

這樣就可以了刷新頁面看效果了。
CSS字體圖標
1.先看一張圖
看到用黑框標記的那一排小圖標吧，一開始我以為是用了background或者img標簽來制作的
但是我用firebug看了好久，都沒找到跟圖片扯上關系的東東。。。后來仔細看了下html結構和css樣式

.fp-iconfont {
font-family: fp-font;
}

好吧，剛開始莫名其妙的，但是注意到兩個我從來沒了解過的東西
一個就是這個 ? 字，另一個就是 fp-font 這個字體，我在想：難道這些圖標是一種字體
好吧，我把這個 ? 字在html結構里面去掉，果然那個小圖標就沒了。。。
然后呢，我把這個頁面的css樣式下載下來，一個名為 index.css 樣式文件，內(nèi)容如下

@font-face {
font-family: fp-font;
src: url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format("embedded-opentype"), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format("woff"), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format("truetype"), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format("svg");
}
.fp-iconfont {
font-family: fp-font;
}
.hidden {
display: none;
}
.bold {
font-weight: 700;
}

...后面很多省略掉
這就很清楚了，確實引入了他們自定義的字體，因為字體文件一般就是eot、ttf之類的文件
原來他們用的是自定義的字體這玩意，我只能說比我們高級多了（當然我發(fā)現(xiàn)很多設計思想比我們高級的，這個圖標字體充其量是我沒接觸過而已）
了解到是一種字體之后，我就百度了一下，看來這玩意有很多資料啊，看來真的是我out了
2.字體圖標的優(yōu)勢
體積小， 快：如果是圖片的話，還要下載圖片呢，多張圖片就要建立多次http連接下載
靈活 高：因為是字體嘛，所以還可以對字體設置各種樣式啊，比如字體大小，顏 等等
如果是一張圖片的話，要放大縮小，那就要做好幾張圖片了。。。
當然，有優(yōu)勢肯定就有劣勢，不然誰還用圖片呢。畢竟圖片的多樣 和豐富
字體是遠遠不能比的，但是對于整個系統(tǒng)而言，如果要用到很多標準化的小圖標
就可以考慮做一套自己的字體圖標了
3.如何使用字體圖標
你得會制作字體（當然我不會，這個我是外行），但是百度了一下看起來也不是很復雜，
比如使用Keyamoon制作的一個Web應用程序IcoMoon，然后再轉(zhuǎn)換成Web字體
因為我不會，也不太感興趣，所以就找了個網(wǎng)站下了幾個字體圖標，演示一下怎么用
http://icomoon.io/ 這個網(wǎng)站有很多免費的，可能就有你要的，我選擇幾個圖標字體下載了，如圖
然后這個網(wǎng)站很人 化，他把這些圖片如何使用，都給你生成好了，包括樣式文件和你下載的字體
然后你打開demo.html就可以看到效果了，頁面會展示你剛才下載的圖標，本質(zhì)是字體而已
那么如果你自定義了字體，使用起來其實蠻簡單的，給一段demo的代碼就明白了

/** html 片段 **/
/** css 引入自定義字體 **/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-dgigik');
src:url('fonts/icomoon.eot?#iefix-dgigik') format('embedded-opentype'),
url('fonts/icomoon.woff?-dgigik') format('woff'),
url('fonts/icomoon.ttf?-dgigik') format('truetype'),
url('fonts/icomoon.svg?-dgigik#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/** 使用自定義字體 **/
.icon-headphones {
font-family: 'icomoon';
}
/** 其實字體圖標就是：將某個字映射到一個字上面,這里是映射到 e600 **/
/** 還記得之前我提到的那個生僻字吧,就是這么干的**/
.icon-headphones:before {
content: "e600";
}

發(fā)現(xiàn)其實蠻簡單的，就是先引入字體，然后定義一個class樣式：指定使用你自定義的字體
完了之后，使用你定義的字映射到字體圖標上，這里面耳機圖標就是映射到 e600 上面
只不過這里面使用了 before 這個樣式，指定在span標簽里面插入 e600 這個
因此頁面打開之后，就用字體圖標展示了
總結：PC前端使用方法：
font-face聲明字體

@font-face {
font-family: 'iconfont';
src: url('font_1427389280_171669.eot'); /* IE9*/
src: url('font_1427389280_171669.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font_1427389280_171669.woff') format('woff'), /* chrome、firefox */
url('font_1427389280_171669.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font_1427389280_171669.svg#iconfont') format('svg'); /* iOS 4.1- */
}

定義使用iconfont的樣式

.iconfont{font-family:"iconfont";
font-size:16px;font-style:normal;}

挑選相應圖標并獲取字體編碼，應用于頁面
!