微信小程序使用字体图标

本文介绍了如何在微信小程序中使用字体图标,包括从阿里巴巴矢量图标库下载图标,将ttf文件转换为base64格式,更新@font-face{}代码,并在小程序的wxss和wxml文件中引入及应用字体图标。
摘要由CSDN通过智能技术生成

下载阿里巴巴矢量图标库的操作见文章《mui增加自定义icon图标》

解压如下:

第二步:将解压出来的ttf字体文件转化成base64格式

转换地址:https://transfonter.org/

解压后得到如下的几个文件:

在微信小程序中使用:

用经过转码之后的stylesheet.css中的@font-face{}部分替换原来没转换之前的iconfont.css中的@font-face{}部分

@font-face{}代码如下:

@font-face {
    font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值