15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 微信小程序wxss样式文件中引用iconfont素材

微信小程序wxss样式文件中引用iconfont素材

时间:2022-08-07 08:27:01 | 来源:网站运营

时间:2022-08-07 08:27:01 来源:网站运营

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.




由于公司之前的微信公众号项目中icon图标大部分采用iconfont,为保持风格一致,在开发微信小程序时, 也以同样的方式引入iconfont, 结果icon图标无法显示! 引用如下:

原因: 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64,然后引用。

解决方案如下:

一.下载阿里巴巴矢量库中自己项目的iconfont字体文件.



二. 打开这个网站, Online @font-face generator 上传字体,选择base64编码,Convert后下载.
三. 将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的wxss文件中,即可引用该iconfont字体图标.


关键词:引用,素材,文件,样式,程序

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭