iconfont是什么锣险？在還沒學(xué)iconfont的時(shí)候我也一直以為一些樣式的圖標(biāo)列表都是插入的圖片或者插入的背景圖泣崩。學(xué)過iconfont之后仿佛打開了新世界的大門~
1.什么是iconfont
首先先來解釋下什么是iconfont崇摄，我的理解就是用字體代替圖片來展示圖標(biāo)或者特殊字體的方法涨薪。比如我們經(jīng)常在淘寶上看到的
在新浪微博貼吧類似網(wǎng)站可以看到
特別在手機(jī)端這種方法用的更多了。
剛開始我在做這些效果時(shí)都是用image-background來做這些效果袋哼。還要考慮到圖片的大小問題冀墨，總之很麻煩。
2.iconfont優(yōu)缺點(diǎn)
之前也說了如果按照常規(guī)方式來插入背景圖的話要考慮到圖片本身大小的問題先嬉，當(dāng)元素大時(shí)圖片就會(huì)失真變得很模糊轧苫。并且一張張圖片占用內(nèi)存，在調(diào)用的時(shí)候還要一張一張的找疫蔓。所以iconfont可以總結(jié)一下兩個(gè)優(yōu)點(diǎn)含懊。
1.首先它的體積要比圖片小的多。
2.不僅體積小衅胀，而且還具有更好的可維護(hù)性（因?yàn)槭鞘噶坎砬牵岳觳蛔冃危活伾梢宰孕懈鼡Q滚躯，支持一些CSS3對(duì)文字的效果）
3.怎么使用iconfont
1.登陸阿里巴巴矢量圖標(biāo)庫(kù)http://www.iconfont.cn/（矢量圖標(biāo)庫(kù)有很多雏门，這里用阿里巴巴圖標(biāo)庫(kù)來演示）
2.登陸過后就可以看到首頁(yè)有很多網(wǎng)友自己制作的彩色素材。這里不建議用彩色的素材因?yàn)橛行g覽器不太兼容掸掏。
3.選擇需要用到的素材后點(diǎn)擊購(gòu)物車按鈕（如果只保存一個(gè)素材的話可以直接點(diǎn)擊下載）
4.選擇好后在左上角購(gòu)物車?yán)镞x擇下載代碼茁影。
5.把下載下來的解壓出來是一個(gè)iconfont的文件夾，把它放在自己的站點(diǎn)下面丧凤。（iconfont文件夾里面有這些文件）
6.在我們自己的樣式文件里引用上圖的iconfont.css文件
<link href="iconfont/iconfont.css" rel="stylesheet" type="text/css">
打開這個(gè)文件我們會(huì)在里面發(fā)現(xiàn)這樣一個(gè)類
這個(gè)類就是用來控制iconfont的大小樣式的募闲，我們不去管它。
7.打開iconfont文件夾下面的demo_unicode.html文件會(huì)發(fā)現(xiàn)你所保存的圖標(biāo)愿待，在圖標(biāo)下面會(huì)有一串字符它就相當(dāng)于這個(gè)素材的編號(hào)浩螺。
8.最后把編號(hào)填入到自己用到的地方就可以了（不要忘了要引用iconfont這個(gè)類和后面的分號(hào)也不要忘記）
還可以在自己的樣式里面在自己給這個(gè)類覆蓋樣式一些字體的樣式也可以在它上面使用，比如字體顏色仍侥，字體大小之類的要出。最終效果如下圖所示：
