iconfont 怎麼在項目中使用圖標庫

iconfont是不少設計以及先後端人員編寫頁面時常常用到的網站，阿里不只爲咱們提供了免費的圖標庫，而且有一套完整的圖標庫體系。不少初學者只知道從圖標庫中下載圖標放入項目中，但在實際項目應用中，過多的圖片會致使頁面加載速度的變慢以及不少其餘問題。今天我介紹一下如何使用Iconfont創建項目並使用圖標。

 

---

 

若是要本身新建項目，首先選擇圖標添加入庫

 

以後，點擊右上角的

右側會出現你當前已添加入庫的圖標欄，如圖

 點擊添加至項目

建立新項目或加入已有項目；

肯定以後，進入個人項目頁面

 圖中每一個圖標所對應的代碼就是項目組的圖標代碼；

點擊‘’暫無代碼，點今生成‘’

會出現Unicode Font class Symbol 代碼

如圖：

 

如今能夠打開你準備添加圖標的項目了：

1.將Unicode中的代碼複製到你的css文件中；

2.將Font class中的代碼連接粘貼到瀏覽器中打開，複製其中這一段代碼（即iconfont的類樣式）：

將這段代碼複製到你項目的css文件中

3.在頁面中引用這個css，給你須要使用圖標的地方寫一個任意元素，如圖：

元素類名爲：iconfont   標籤中的代碼即爲你想使用的圖標代碼

刷新後頁面就會出現相對應的圖標了：

須要注意的是，圖標是至關於一個文字，若是要調整大小不是改變寬高，而是字號font-size，一樣顏色、居中之類的均可已經過調整文字樣式調整。

例如我給當前的圖表添加一組樣式：

獲得的效果就如圖：

在開發過程當中，由於可能要不斷地往項目中添加新圖標，每次向項目中添加圖標以後切記要從新生成一下Unicode碼，把最新的代碼覆蓋到以前的css中，不然新添加的圖標就不會顯示。開發結束後，能夠把圖標源碼打包保存到本地，經過讀取本地也就不會產生加載慢之類的問題。

 

---

 

Iconfont的功能遠遠不止這些，感謝阿里給咱們帶來了這麼多的便利。

 

好啦，此次的分享就到這裏，我在工做中不斷地進步，也但願我工做中遇到的問題也能對你們有所幫助。