微信小程序如何引用iconfont

如题所示,微信小程序中不支持iconfont的正常引用的,因此,得找些窍门,方案有四,当然其三是引用其他大佬的,https://blog.csdn.net/hdchangchang/article/details/83511007,在这边就不写了,有兴趣的可以查看链接,说说自己使用的方法。

首先进入iconfont官网,登录,挑选好图标,添加入项目,具体操作如图:

选择图标,加入购物车,并将其添加入项目当中。。。

微信小程序如何引用iconfont

进入项目,点击Unicode,再次点击查看在线链接,将图标的线上地址配置显示出来。。。

微信小程序如何引用iconfont

然后,点击复制代码,将线上链接复制到粘贴板。。。

微信小程序如何引用iconfont

然后下载项目至本地。。。

微信小程序如何引用iconfont

在小程序项目目录中新建图标目录及图标展示样式的.wxss文件。。。

微信小程序如何引用iconfont

新建完成之后,将下载后图标压缩文件解压,并找到iconfont.css文件,找到如图片所求的这段内容,将刚才复制的内容完全替换。。。

微信小程序如何引用iconfont

替换完成后如下图。。。

微信小程序如何引用iconfont

保存之后,在小程序中的入口全局样式当中@import,即可通过普通的模式引用字体图标,

微信小程序如何引用iconfont

即: <text class="iconfont icon-shizhe"></text>

整个过程就一句话,将字体图标的路径改为线上路径即可,坑就是跟线上服务器有关的啦 ~~~