微信小程序使用阿里巴巴矢量图标库方法
如默
撰写于 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日,已超过316天没有更新,若内容或图片失效,请留言反馈。

说明

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

步骤

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

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)

猜您想看

评论区(暂无评论)

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

我要评论

Vaptcha 初始化中...