uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标

我超幸运12138

已于 2024-07-15 16:47:08 修改

阅读量2.4k

点赞数 11

CC 4.0 BY-SA版权

文章标签： uni-app

于 2024-02-03 15:59:46 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/m0_45858045/article/details/136008589

1.iconfont图标库

在这里插入图片描述

2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标

在这里插入图片描述
找到之后添加入库（添加购物车）

打开购物车后选择添加项目，最好是根据实际情况，把项目需要的图标放在一个项目里面

在这里插入图片描述

刚刚选择好的图标添加到了新闻项目里面

在这里插入图片描述

uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色

在这里插入图片描述

编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b8e85d345ba0431d8613230adda1f821.png

在这里插入图片描述

完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了

在这里插入图片描述

下载方式有两种，

可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了

在这里插入图片描述

方法二，直接点击下载到本地，复制iconfont.ttf放在static里

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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