聊一聊 iconfont

簡述 iconfont

把圖標用字體的方式呈現
把大量的圖標變成了一個字體文件，減少了請求數，而且有效減小請求體積。當一個網頁有自己的圖標字體庫之後，可以複用在很多地方，減少很多二次開發成本

為什麼使用iconfont?

1.兼容性最好，支持ie6+
2.矢量圖形，可伸縮

使用方式

1.登錄:http://www.iconfont.cn/

2.找到圖標管理->我的項目->新建項目
點擊新建項目,用於保存自己常用的圖標

3.項目新建完成後,往項目裏添加我們想使用的圖標，搜索想要的圖標,然後添加到購物車

4.添加到購物車完成後,點擊右上角的購物車圖標,選擇添加至項目,選擇剛剛創建的項目,確定

5.將打包好的字體文件下載到本地添加到你的項目中,在項目中引用文件中的iconfont.css文件

6.把下載的文件都放在一個文件夾內,然後放在項目目錄中,再在項目中引入iconfont.css文件,或將iconfont.css文件裏的內容複製粘貼到你當前項目的css內容裏

7.創建一個i標籤或span標籤,添加兩個類名,一個固定的是iconfont,另一個是你想要的那個圖標對應的類名

// 修改大小可通過 style 
<i class="iconfont icon-xxx">