問題描述:
在阿里巴巴矢量圖標庫中下載了一些圖標用在vue項目中逸嘀,當時是打包下載的车要。代碼編寫到后面,發(fā)現(xiàn)還需要一些新的圖標崭倘,按照之前引入圖標到項目的套路來的話翼岁,就要重新將之前下載過的圖標找到,然后和新的圖標一起司光,一并下載下來引入琅坡。這工作量,嘖嘖残家,找到原來那些圖標就得半天榆俺,所以各種百度搜索之后,終于找到了一種漸變的添加新圖標的方法坞淮,親測有效茴晋,有需要的童鞋可以看看。
解決辦法:
1 在矢量圖標庫找到自己要新增加的圖標回窘,添加到購物車之后诺擅,選擇下載代碼
就在圖標購物車的下面
2? 解壓下載下來的壓縮包,然后找到iconfont.css這個文件啡直,將@font-face這一段復制到原來的iconfont.css文件中
注意修改路徑烁涌,不然會報錯.
新圖標的iconfont.css
在項目中原來的iconfont.css中添加上新圖標的@font-face
3??然后就是在下面將新圖標的類復制過來苍碟,也是從新圖標的iconfont.css復制到原來的iconfont.css中,注意如果新的圖標的命名與原來的有沖突的話撮执,自行修改一下微峰,不然就覆蓋掉原來的了
新圖標的類
4? 上面幾步都做完之后,就可以跟其他圖標一樣抒钱,在項目中使用啦蜓肆。目前測試在谷歌中沒有問題,其他瀏覽器未進行測試继效,不做保證哈