背景:
mpvue進行小程序項目開發時候,會有很多圖標需求,但是小程序官方提供的icon圖標庫實在有限而且也不利於調樣式,所有想到和之前前端項目一樣引入iconfont。
圖標加入購物車及項目
下載到本地,解壓以后的文件夾列表如下:
修正:只需要 復制 iconfont.css文件就可以了,其他的文件不需要
把紅框中的部分 粘貼到 自己的項目中(復制 iconfont.css就可以了),記得放在 static文件目錄下
因為字體圖標也屬於靜態資源的一部分。注意:拷貝到自己項目后,將iconfont.css
的@font-face
部分換成之前復制的帶有alicdn的代碼。
在項目引入css路徑
App.vue
style
開頭引入:
@import '../../../static/iconfont.css' // 若css在static中,要加..,不然會報錯
使用字符圖標就可以在項目里顯示你想要的圖標啦
<i class="iconfont icon-fangdajing"></i>
備注事項:
做項目的時候,直接引入cdn鏈接的方式,在項目里面好像iconfont 字體不起效果,直接改成本地加載的方式反而來做可以顯示出圖標來,后期有時間再查找一下原因