返回列表 发布新帖

在微信小程序中使用阿里图标图标

IP属地:四川省成都市
227 0
发表于 2023-5-29 01:25:03 | 查看全部 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图:需将图中箭头所指的字体文件通过https,将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲stylesheet.css中的内容全部复制下来粘贴进新建好的iconfont.wxss文件中。
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图

       

                               
登录/注册后可看大图

       

需将图中箭头所指的字体文件通过https://transfonter.org/进行base64 处理

       

                               
登录/注册后可看大图

       
将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲stylesheet.css中的内容全部复制下来粘贴进新建好的iconfont.wxss文件中

       

                               
登录/注册后可看大图

       

       

                               
登录/注册后可看大图

       
然后将阿里图库下载下来的文件夹中的iconfont.css文件打开将其中部分代码复制粘贴至我们自己小程序中新建的iconfont.wxss文件中

       

                               
登录/注册后可看大图

       

       

                               
登录/注册后可看大图

       
自此,字体文件已经处理完成,只等我们在各个页面使用即可。处理完成的文件如下图所示

       

                               
登录/注册后可看大图

       
最后一步,在需要的界面进行使用,前提是需要将我们处理后的iconfont.wxss文件引入到小程序根目录下的app.wxss文件进行全局引入。如下图引入即可

       

                               
登录/注册后可看大图

       
引入完毕后即可在任意界面进行使用了,使用方式如下

       

                               
登录/注册后可看大图

       
参考博客:https://blog.csdn.net/hdchangchang/article/details/83511007

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

908164873@Qq.com

让我们一起寻找开源的乐趣
加入QQ群把ヽ( ̄ω ̄( ̄ω ̄〃)ゝ
  • 关注公众号
  • 添加微信客服
Copyright © 2001-2024 ROOT开源 版权所有 All Rights Reserved. 网站地图|仅供演示|仅供演示
关灯 在本版发帖 官方QQ群 QQ客服返回顶部
快速回复 返回顶部 返回列表