最近学习微信小程序,需要使用很多小图标,所以就想到使用在线字体图标,那么接下来分享一下如何在小程序使用iconfont
一.生成iconfont
首先在官网/将自己需要的图标加入购入车,然后点击右上角的购物车图标,弹出如下内容框
然后点击确定按钮,就出现如下界面,此时,已经生成字体图标啦,点击unicode选项,并且点此复制代码,点击旁边的下载至本地,将会将文件下载到本地啦,解压缩文件
将iconfont.css文件中的如下内容替换为你刚刚复制的内容即可
二、在微信小程序中引用
然后就很简单啦,复制你最终的iconfont.css的内容到你的微信小程序的app.wcss全局引入,如下图
现在你可以在任意page.wxml中像这样使用,就可以出现你想要的图标,
<icon class="iconfont icon-jifen"></icon><icon class="iconfont icon-dizhi-01"></icon>
class属性中的第一个值是iconfont 第二个是你生成的字体图标的class名哦