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 字体不起效果，直接改为本地加载的方式反而来作能够显示出图标来，后期有时间再查找一下缘由