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

本文只引入iconfont图标

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

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

点击下载至本地

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

微信小程序引入自定义字体图标_第1张图片

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

微信小程序引入自定义字体图标_第2张图片

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

微信小程序引入自定义字体图标_第3张图片

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

微信小程序引入自定义字体图标_第4张图片

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

微信小程序引入自定义字体图标_第5张图片

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

微信小程序引入自定义字体图标_第6张图片

 

你可能感兴趣的:(微信小程序引入自定义字体图标)