小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,上一篇文章我是复盘了 # 解决element ui message 弹框连续点击弹出问题，今天我来给大家介绍一下用uni-app写小程序引入字体图标 iconfont的相关方法;按照往常的那种引入方法不可用;因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64，即可引用;希望大家多多支持我的文章多给点建议,谢谢!
正文开始啦~
第一步进入你的iconfont项目
上面红色框框的很重要的最后一步会用到待会再说;对了如果有图标更新的点上图第二个那个红色框框的更新一下css链接代码;否则到时候使用不到最新图标
第二步点击下载本地项目
解压完就是这个了 , 红色框起来的放到你的项目文件里面 ,记得引入的时候路径别错了,引入路径对了就可以了 ( 注意将此文件重新替换到项目中,要不然怎么也引用不了没有想过类名 )
这是我放的路径大家可以参考一下
第三步将iconfont.ttf文件内容转成base64
进入这个网站, 然后把刚刚解压的文件打开 找到iconfont.ttf文件
www.giftofspeed.com/base64-enco…
然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf 文件,然后点击全选复制
最后一步iconfont.css文件放入项目里并引用
在项目里面打开刚刚放入的iconfont.css
@font-face {
font-family: "iconfont";
src: url('data:font/truetype;charset=utf-8;base64, 转换的base64内容 ') format('truetype');
}
把你自己文件的那个@font-face删除, 然后引入上面的代码 , 红色框起来的就是放你刚刚全选内容,这样字体倒是引入进来了;后你在APP.vue里面引入这个iconfont.css就好啦
结语:
又到了文章的结尾;希望这篇文章能帮到大家;
然后 ( 点赞+评论+关注 ) 有问题可以来互相交流一下
