iconfont是很多設計以及前后端人員編寫頁面時經常用到的網站，阿里不僅為我們提供了免費的圖標庫，並且有一套完整的圖標庫體系。很多初學者只知道從圖標庫中下載圖標放入項目中，但在實際項目應用中，過多的圖片會導致頁面加載速度的變慢以及很多其他問題。今天我介紹一下如何使用Iconfont建立項目並使用圖標。
如果要自己新建項目，首先選擇圖標添加入庫
之后，點擊右上角的
右側會出現你當前已添加入庫的圖標欄，如圖
點擊添加至項目
創建新項目或加入已有項目；
確定之后，進入我的項目頁面
圖中每個圖標所對應的代碼就是項目組的圖標代碼；
點擊‘’暫無代碼，點此生成‘’
會出現Unicode Font class Symbol 代碼
如圖：
現在可以打開你准備添加圖標的項目了：
1.將Unicode中的代碼復制到你的css文件中；
2.將Font class中的代碼鏈接粘貼到瀏覽器中打開，復制其中這一段代碼（即iconfont的類樣式）：
將這段代碼復制到你項目的css文件中
3.在頁面中引用這個css，給你需要使用圖標的地方寫一個任意元素，如圖：
元素類名為：iconfont 標簽中的代碼即為你想使用的圖標代碼
刷新后頁面就會出現相對應的圖標了：
需要注意的是，圖標是相當於一個文字，如果要調整大小不是改變寬高，而是字號font-size，同樣顏色、居中之類的都可已通過調整文字樣式調整。
例如我給當前的圖表添加一組樣式：
得到的效果就如圖：
在開發過程中，因為可能要不斷地往項目中添加新圖標，每次向項目中添加圖標之后切記要重新生成一下Unicode碼，把最新的代碼覆蓋到之前的css中，否則新添加的圖標就不會顯示。開發結束后，可以把圖標源碼打包保存到本地，通過讀取本地也就不會產生加載慢之類的問題。
Iconfont的功能遠遠不止這些，感謝阿里給我們帶來了這么多的便利。
好啦，這次的分享就到這里，我在工作中不斷地進步，也希望我工作中遇到的問題也能對大家有所幫助。