微信小程序使用阿里巴巴矢量图标库方法
2023年 07月 18 日

如默

说明

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用阿里巴巴矢量图标库的方法。

步骤

先附上阿里巴巴矢量图标库地址:阿里巴巴矢量图标库

1,选择想要的图标,点击添加入库,也就是购物车图标

2,全部添加好之后,点击右上角购物车,选择添加至项目

3,选择font class,点击下载至本地,或者在线链接也可以,复制iconfont.css内容到微信小程序代码里,文件名iconfont.wxss

5,在app.wxss文件里添加@import "path/to/iconfont.wxss";

6,使用的时候class="iconfont icon-github"这样写就可以了,前缀是iconfont,这个可以在项目设置里面修改,默认是这个

这个方法唯一的问题是需要在微信开发者后台添加一个download域名,https://at.alicdn.com/,这样才不会报错,才可以正常引用。

本地方式

如果不想添加https://at.alicdn.com/,则需要先添加购物车,选择font class之后,下载下来,将iconfont.ttf这个文件上传到这里:transfonter,如下图:

transfonter

transfonter

打开Base64 encode,ttf勾选上,上传之后,点击convert,把转换后的文件中,复制stylesheet.css全部内容,替换掉iconfont.css中的@font-face{}

修改iconfont.css后缀名为wxss,然后在微信小程序中引用这个文件即可,参照上面方法的5、6步。

微信小程序使用阿里巴巴矢量图标库方法

温馨提示:

本文最后更新于2023年07月18日,已超过140天没有更新,若内容或图片失效,请留言反馈。

说明

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用阿里巴巴矢量图标库的方法。

步骤

先附上阿里巴巴矢量图标库地址:阿里巴巴矢量图标库

1,选择想要的图标,点击添加入库,也就是购物车图标

2,全部添加好之后,点击右上角购物车,选择添加至项目

3,选择font class,点击下载至本地,或者在线链接也可以,复制iconfont.css内容到微信小程序代码里,文件名iconfont.wxss

5,在app.wxss文件里添加@import "path/to/iconfont.wxss";

6,使用的时候class="iconfont icon-github"这样写就可以了,前缀是iconfont,这个可以在项目设置里面修改,默认是这个

这个方法唯一的问题是需要在微信开发者后台添加一个download域名,https://at.alicdn.com/,这样才不会报错,才可以正常引用。

本地方式

如果不想添加https://at.alicdn.com/,则需要先添加购物车,选择font class之后,下载下来,将iconfont.ttf这个文件上传到这里:transfonter,如下图:

transfonter

transfonter

打开Base64 encode,ttf勾选上,上传之后,点击convert,把转换后的文件中,复制stylesheet.css全部内容,替换掉iconfont.css中的@font-face{}

修改iconfont.css后缀名为wxss,然后在微信小程序中引用这个文件即可,参照上面方法的5、6步。


赞 (0)

猜您想看

VScode配置vue2用户代码片段

如题,使用VScode新建一个文件的时候,比如 vue 文件,我们需要手动输入很多内容,配置一个代码片段可以解决

01

Python3安装turtle全教程

最近需要使用Python2中的turtle画图,使用默认的pip install turtle无法安装成功,会报错,下载源码安装成功,特此记录。

02

Windows 11正式版发布,官方原版ISO下载以及使用体验

Windows 11正式版发布,记录一下官方原版ISO下载以及使用体验

03

Python虚拟环境pipenv使用说明

最近需要写好几个Python项目,每个项目的环境都不一样,需要用虚拟环境,记录一下。

04

Python pip 更换镜像源

有时候网不好,pip安装非常慢,所以需要更换源,特记录如下

05

微信小程序使用阿里巴巴矢量图标库方法

最近在写了一个小程序,原生组件里面的图标很少,而且不好看,这里记录一下如何使用阿里巴巴矢量图标库的方法。

06

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论

Vaptcha 初始化中...