微信小程序里引用自定义图标

本人刚开始接触微信小程序,发现它自带的icons样式太少,在网上搜索里一番,自己稍微整理里一下,供大家参考。

1.我使用了阿里巴巴的矢量图标库,http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=3287,这里面的图标相对很丰富,并且淘票票专业版使用的也是该图标,很适用与手机端,将需要使用的图标添加到购物车,然后点击下载代码,统一下载,如图所示;

2.在本地找到下载的文件并解压,在文件夹下找到iconfont.css文件并打开此文件,将其代码粘贴到微信小程序项目里,放在style样式里,本人用的wepy框架,直接放在了app.wpy文件里的style样式下,方便整个项目里都可以直接引用下载的图标了,当然也可以放在单个页面里,随个人要求,如图所示:

3.然后我们就可以在代码里直接引用我们的图标啦,图标大小和颜色可以直接在style里修改,如图所示:

然后就大功告成啦!不过要注意,每次新下载的图标它里面的文件内容都是不一样的,需要重新拷贝所有内容,不要以为下载了一次之后再下载其他图标都是同样的font-face,因为我踩了这个坑,所以就写出来告诉大家啦!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值