一歧寺、css sprite方法
將多個(gè)小圖標(biāo)組合到一張大圖片上锅锨，這就是傳說中的雪碧圖撒穷，然后運(yùn)用background-position: X X竭鞍；定位到雪碧圖的不同位置板惑，從而顯示不同圖標(biāo)。
以下是具體步驟：
1.阿里巴巴矢量圖標(biāo)庫下載自己需要的圖標(biāo)偎快，可自行選擇所需顏色冯乘、大小、保存方式晒夹，這里我保存為png圖片格式裆馒。
2.可以到http://csssprites.com/這個(gè)網(wǎng)站把你下載的多個(gè)小圖標(biāo)組合到一張圖上姊氓，這就是傳說中的"雪碧圖"。
頁面下方有提示每個(gè)小圖標(biāo)在雪碧圖上的位置信息领追。
3.準(zhǔn)備工作做好了就可以寫代碼了他膳，只做一個(gè)演示，代碼非常簡單绒窑。
4.瀏覽器中效果
二棕孙、使用圖標(biāo)字體在網(wǎng)頁中畫icon小圖標(biāo)(font+html)
就相當(dāng)于你寫一個(gè)字，然后給這個(gè)字添加很多的css樣式些膨，使它變成了圖標(biāo)的樣子蟀俊。優(yōu)點(diǎn)如下：
- 靈活性：可輕松改變圖標(biāo)的顏色、大小或其它c(diǎn)ss效果
- 矢量性：圖標(biāo)是矢量的订雾，與像素?zé)o關(guān)肢预，縮放圖標(biāo)不會影響清晰度。
- 兼容性：字體圖標(biāo)支持所有現(xiàn)代瀏覽器（包括糟糕的IE6）
- 本地使用：通過添加定制字體到你的本地系統(tǒng)洼哎，你可以在各種不同的設(shè)計(jì)和編輯應(yīng)用程序中使用它們烫映。
圖標(biāo)字體(Icon Fonts)的引入方式有兩種:link方法和@font-face 方法。
（1） link方法引入圖標(biāo)字體樣式
1.從阿里巴巴矢量圖標(biāo)庫的購物車?yán)锇褕D標(biāo)文件下載到本地噩峦，解壓锭沟，得到很多文件。注意其中的兩個(gè)就好了识补，一是demo.html族淮，這是一個(gè)使用說明，二是iconfont.css ,這是一個(gè)樣式文件凭涂， 待會兒要用到祝辣。
2.使用編輯器打開demo.html這個(gè)文件，我們只關(guān)注<i></i>標(biāo)簽里的內(nèi)容切油。（因?yàn)槲蚁螺d了三個(gè)圖標(biāo)蝙斜，所以我這里有三個(gè)<i></i>標(biāo)簽）
3.直接復(fù)制這三個(gè)<i></i>標(biāo)簽到你的代碼中（不要更改標(biāo)簽內(nèi)的內(nèi)容，也不要更改它的class名白翻，但可以添加class名以定義新的樣式）乍炉，并在文件頭部加link標(biāo)簽，將樣式文件iconfont.css引入進(jìn)來滤馍，注意路徑 。
代碼如下底循，非常簡單：
4.瀏覽器中效果
5.添加class名巢株，自己定義新的樣式。比如我給中間的企鵝添加class名為“changeColor”熙涤，并定義樣式
.changeColor{
font-size: 50px;
color:pink;
}
于是它變成了這樣：
（2）@font-face 方法引入
@font-face 方法原理和link方法一樣阁苞，只是引入方式不同困檩，還是以那些資源來講。
1.用編輯器打開iconfont.css這個(gè)文件那槽，復(fù)制如圖紅色框中的所有內(nèi)容悼沿。（因?yàn)椴煌瑸g覽器對不同字體的支持度不同，所以我們需要把eot,woff,ttf,svg這四種字體都引入）
2.復(fù)制到你的<style></style>標(biāo)簽中即可骚灸。
3.打開瀏覽器就可以看到效果了
4.同樣可以修改樣式
三糟趾、使用圖標(biāo)字體在網(wǎng)頁中畫icon小圖標(biāo)(font+css)
主要運(yùn)用偽標(biāo)簽 ：before{content:" "}來實(shí)現(xiàn)，這里我們來畫一個(gè)心形圖標(biāo)甚牲，具體步驟如下：
１．下載字體文件义郑，用編輯器打開iconfont.css文件，可以看到下圖這樣一句代碼丈钙。其中e64a是這個(gè)圖標(biāo)的16進(jìn)制html實(shí)體非驮。
2..icon-heart::before{ }在“你”字前面添加圖標(biāo)圖標(biāo)實(shí)體，link引入css樣式文件從而設(shè)置這個(gè)圖標(biāo)實(shí)體的樣式雏赦。
3.瀏覽器顯示效果
四劫笙、總結(jié)
- css sprite方法兼容性完美，但是縮放會導(dǎo)致圖標(biāo)失真星岗，后期維護(hù)困難
- font+HTML方法兼容性完美填大，縮放不失真，后期維護(hù)簡單
- font+css不支持IE低版本伍茄，縮放不失真栋盹，后期維護(hù)簡單
知識點(diǎn)補(bǔ)充：
1. 圖標(biāo)網(wǎng)站有很多，如：icomoon敷矫，fontello例获，阿里巴巴矢量圖標(biāo)庫等，選擇自己喜歡的就好曹仗。
2.瀏覽器對字體支持情況
