一、css sprite方法
將多個小圖標組合到一張大圖片上，這就是傳說中的雪碧圖，然后運用background-position: X X；定位到雪碧圖的不同位置，從而顯示不同圖標。
以下是具體步驟：
1.阿里巴巴矢量圖標庫下載自己需要的圖標，可自行選擇所需顏色、大小、保存方式，這里我保存為png圖片格式。
2.可以到http://csssprites.com/這個網(wǎng)站把你下載的多個小圖標組合到一張圖上，這就是傳說中的"雪碧圖"。
頁面下方有提示每個小圖標在雪碧圖上的位置信息。
3.準備工作做好了就可以寫代碼了，只做一個演示，代碼非常簡單。
4.瀏覽器中效果
二、使用圖標字體在網(wǎng)頁中畫icon小圖標(font+html)
就相當于你寫一個字，然后給這個字添加很多的css樣式，使它變成了圖標的樣子。優(yōu)點如下：
- 靈活性：可輕松改變圖標的顏色、大小或其它css效果
- 矢量性：圖標是矢量的，與像素無關，縮放圖標不會影響清晰度。
- 兼容性：字體圖標支持所有現(xiàn)代瀏覽器（包括糟糕的IE6）
- 本地使用：通過添加定制字體到你的本地系統(tǒng)，你可以在各種不同的設計和編輯應用程序中使用它們。
圖標字體(Icon Fonts)的引入方式有兩種:link方法和@font-face 方法。
（1） link方法引入圖標字體樣式
1.從阿里巴巴矢量圖標庫的購物車里把圖標文件下載到本地，解壓，得到很多文件。注意其中的兩個就好了，一是demo.html，這是一個使用說明，二是iconfont.css ,這是一個樣式文件， 待會兒要用到。
2.使用編輯器打開demo.html這個文件，我們只關注<i></i>標簽里的內容。（因為我下載了三個圖標，所以我這里有三個<i></i>標簽）
3.直接復制這三個<i></i>標簽到你的代碼中（不要更改標簽內的內容，也不要更改它的class名，但可以添加class名以定義新的樣式），并在文件頭部加link標簽，將樣式文件iconfont.css引入進來，注意路徑 。
代碼如下，非常簡單：
4.瀏覽器中效果
5.添加class名，自己定義新的樣式。比如我給中間的企鵝添加class名為“changeColor”，并定義樣式
.changeColor{
font-size: 50px;
color:pink;
}
于是它變成了這樣：
（2）@font-face 方法引入
@font-face 方法原理和link方法一樣，只是引入方式不同，還是以那些資源來講。
1.用編輯器打開iconfont.css這個文件，復制如圖紅色框中的所有內容。（因為不同瀏覽器對不同字體的支持度不同，所以我們需要把eot,woff,ttf,svg這四種字體都引入）
2.復制到你的<style></style>標簽中即可。
3.打開瀏覽器就可以看到效果了
4.同樣可以修改樣式
三、使用圖標字體在網(wǎng)頁中畫icon小圖標(font+css)
主要運用偽標簽 ：before{content:" "}來實現(xiàn)，這里我們來畫一個心形圖標，具體步驟如下：
１．下載字體文件，用編輯器打開iconfont.css文件，可以看到下圖這樣一句代碼。其中e64a是這個圖標的16進制html實體。
2..icon-heart::before{ }在“你”字前面添加圖標圖標實體，link引入css樣式文件從而設置這個圖標實體的樣式。
3.瀏覽器顯示效果
四、總結
- css sprite方法兼容性完美，但是縮放會導致圖標失真，后期維護困難
- font+HTML方法兼容性完美，縮放不失真，后期維護簡單
- font+css不支持IE低版本，縮放不失真，后期維護簡單
知識點補充：
1. 圖標網(wǎng)站有很多，如：icomoon，fontello，阿里巴巴矢量圖標庫等，選擇自己喜歡的就好。
2.瀏覽器對字體支持情況
