mpvue小程序開發之 iconfont圖標引入

背景：

 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 字體不起效果，直接改爲本地加載的方式反而來作能夠顯示出圖標來，後期有時間再查找一下緣由