uni-app 怎么在tabbar使用阿里图标库

提示:微信小图标不支持使用字体图标的方式,只能下载png

 方法一:直接下载png图片

        我们首选打开阿里矢量图标库 链接在下方 👇 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/        首先,我们在图标库中选择自己喜欢图标,然后加入到自己的项目中,然后统一下载,在下载的时候要注意下,我们选择下载至本地->下载png

        我们需要下载2种颜色的图标,一个是未选中的,一个是选中的,下载后我们解压到项目的static目录中

然后我们在pages.json的tabbar中引用即可

属性解释:

iconPath:没有选中时显示的图标

selectedIconPath:选中的时候显示的图标

方法二:使用文字图标的方式

        这里在下载的时候需要选择下载至本地

        下载后解压将得到的文件, iconfont.ttf  复制到 项目 static 中去

        然后我们需要在tabBar中设置 iconfontSrc 的值,路径对应刚刚下载的ttf文件即可。

需要注意的是text的值为图标的Unicode(16 进制),前面需要加上一个\u  

\u  代表这是一个16进制的的值

相关推荐

  1. uni-app自定义tabbar(van-tabbar

    2024-06-16 03:22:02       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-16 03:22:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-16 03:22:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-16 03:22:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-16 03:22:02       20 阅读

热门阅读

  1. Qt事件处理和传递流程

    2024-06-16 03:22:02       6 阅读
  2. springboot事务管理的机制是什么

    2024-06-16 03:22:02       4 阅读
  3. datalist 是什么?

    2024-06-16 03:22:02       5 阅读
  4. 026、工具_redis-server

    2024-06-16 03:22:02       7 阅读
  5. Qt 6.13

    Qt 6.13

    2024-06-16 03:22:02      9 阅读
  6. 摄像头校准之白平衡&畸变&坏点

    2024-06-16 03:22:02       7 阅读
  7. 每日复盘-202406014

    2024-06-16 03:22:02       7 阅读
  8. 【redis过期删除】

    2024-06-16 03:22:02       9 阅读