微信小程序引入自定义字体图标

本文只引入iconfont图标

   在iconfont内获取到图标后  下载到本地 后将  iconfont.ttf文件进行base64转码  地址:https://www.giftofspeed.com/base64-encoder/

将转码后的一长串引入到iconfont.css文件中的src内,原有的src内的内容删除掉.在将新的iconfont.css在app.vue文件中引入 则可使用iconfont字体图标

点击下载至本地

解压后获得的文件 选中iconfont.ttf

打开转换网址https://www.giftofspeed.com/base64-encoder/

选择文件后将超文本框里的内容复制了(选择了.ttf文件就会自动生成base流)

将解压后的iconfont.css通过编辑器打开(任意编辑器)

只需要看font-face里的内容即可 将 /*IE9*/整行删除  /IE6-IE8这行只留src:      将所复制的内容粘贴到base64, 到format('woff2')以前的内容替换掉 并将其后的url全部删除:

保存后 将iconfon.css的后缀改为 .wxss 然后放到小程序的文件夹中就可以引用了(根据项目所需我在app.wxss引入的)  我项目中存放的文件名为stylesheet.wxss

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值