字體圖標--iconfont

在寫頁面的時候，不可避免須要用到好多小圖標，可讓UI切圖，可是這些切好的小圖片在小屏手機上顯示比較清晰，可能放到大屏上會有清晰度稍微降低的問題，這個問題能夠用阿里巴巴矢量圖標--iconfont

來完美解決（https://www.iconfont.cn/），由於iconfont的圖標是矢量的，不會出現變形和清晰度降低問題，並且後期操做性靈活，能夠改圖標的大小，顏色就像操做字體的屬性同樣方便，下面就開始介紹

iconfont如何使用

1、根據上面的網址進入阿里巴巴矢量圖標庫。註冊一個帳號，登陸

2、如圖所示【圖標管理】--【個人項目】，點擊右側的加號建立項目，填入項目名稱和項目描述，最後點擊【新建】，

例如我要在個人shop項目中使用這些圖標，個人項目名稱就是shop，項目描述就是shop項目的iconfont

 

 3、前兩步是iconfont的就緒工做，第三步開始正式的使用，例如咱們選擇一個home圖標、一個返回箭頭的icon爲例，在右上角搜索框搜索「home」，下面會展現各類各樣home的icon,選擇咱們中意的一款

 

 

 

鼠標放上去會有一個浮層，點擊加入購物車，同理在搜索箭頭放入購物車，在點擊購物車圖標--【添加至項目】

 

在個人項目界面，選擇【下載至本地】會獲得一個如圖所示的文件夾，把紅框裏的五個文件放到項目存放css,js的文件夾下，從新新建一個iconfont文件夾，而後把這五個文件放入iconfont文件夾下

，把綠色框圈住的iconfont.css文件放和項目存放css文件的地方

 

 

 

 

4、修改iconfont.css文件url的路徑，修改爲本身本地存放的路徑，對照這幾個url地址是否是正確引用了本身本地的項目文件，我截的圖是本地已經修改後的正確路徑

 

 5、項目使用

這個iconfont類是使用iconfont.css裏的類名，這個是固定必須的，。是複製阿里巴巴矢量庫裏本身剛剛加入購物車的箭頭函數的代碼

 

 至此，iconfont的使用已經完成了