前端開發(fā)中很多時候我們都會遇到一些比較小的icon圖標（例如購物車圖標）不脯，這些圖標在進行操作以后往往需要改變自身顏色。傳統(tǒng)PC端的方法一般是使用"精靈圖"，將所有的小圖標切在一張比較大的透明圖層里，然后通過改變位移來切換圖片，避免一次加載過多圖片資源酥泛。但是移動端時代，我們大部分的處理方法是將小圖標生成字體文件嫌拣，然后就可以通過改變字體的color值來實現(xiàn)顏色變化的效果了柔袁。
推薦圖標下載網(wǎng)址：iconfont.cn可以搜索自己想要的圖標并且直接生成字體文件。
1异逐、點擊官方圖標庫捶索，搜索自己想要的圖標并加入購物車
加入購物車
2、進入購物車點擊添加至項目灰瞻，此處可新建一個項目用來存儲當前項目所需的所有圖標
新建項目
3腥例、圖標管理我的項目，將項目下載至本地
下載至本地
4酝润、解壓下載來的安裝包燎竖，將紅色框框類的文件單獨拷貝出來
解壓下載資源
5、在項目中新建文件夾要销，將拷貝的文件放入文件夾內(nèi)
引入項目中
6构回、打開iconfont.css查看引入的五個字體的路徑，注意引入路徑的正確性疏咐，我這里將iconfont.css放在外面纤掸，另外五個文件放在新建的iconfont文件夾中所以里面改了路徑
路徑檢查
7、因為我用的是vue浑塞，所以在mani.js中引入iconfont.css
引入iconfont.css
8借跪、項目中使用引入的字體文件，第一種是直接飲用iconfont.css最下面提供的class名酌壕，第二種是直接去iconfont.cn我的項目中使用它的值掏愁，具體呈現(xiàn)效果如下圖，修改它的color值即可改變圖片的顏色托猩。
使用字體文件
效果圖
