2025年微信小程序使用阿里图标

微信小程序使用阿里图标方法一 使用本地文件 1 下载阿里图标到本地 http iconfont cn 2 转换 iconfont ttf 文件 小程序的 wxss 文件的 font face 的 url 不接受 http 地址作为参数 但可以接受 base64 因此需将字体文件下载后 转换为 base64 用网址 https transfonter org 转换 3

大家好,我是讯享网,很高兴认识大家。

方法一:使用本地文件

1 下载阿里图标到本地 http://iconfont.cn/ 


讯享网

 

2.转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)

 

3.文件解压

解压后会得到三个文件:demo.html,iconfont.ttf,stylesheet.css。下面会需要iconfont.ttf,stylesheet.css拷贝到ali-con目录下

 

4.建立路径

在根目录下建立static/ali-con存放阿里图标内容。其中建立iconfont.acss是方便管理阿里图标

 

iconfont.wxss内容

@import "stylesheet.wxss"; /* @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } */ .iconfont{ font-family: "iconfont" !important; font-size: 12px; font-style: normal; } .icon-home:before{content:'\e613';} .icon-home1:before{content:'\e7a3';} .icon-gouwuche:before{content:'\e60c';}

讯享网

 

5.使用

讯享网/* 在wxss导入 阿里图标样式*/ @import "/static/ali-icon/iconfont.wxss"; 
/*wxml 文件使用阿里图标*/ <text class="iconfont icon-fenlei li-ico"></text>

 

小程序高级群:

小讯
上一篇 2025-01-24 18:31
下一篇 2025-02-21 15:28

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/122993.html