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

原创 已于 2024-07-15 16:47:08 修改 · 2.7k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

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

1.iconfont图标库

在这里插入图片描述

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

下载方式有两种，

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

在这里插入图片描述

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

最低0.47元/天 解锁文章
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 3499
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8577
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp中tabBar使用iconfont图标
2401_83213163的博客
03-16 1027
2、在小程序中使用需要下载成png格式保存到本地后，复制到sta​​​​​​​tic中，用iconpath调用即可。
uniapp小程序tabbar图标
07-25
uniapp小程序tabbar整套图标，包含选中和非选择的
iconfont 图标如何在uniapp中的tabBar使用
qq_40259123的博客
02-20 8149
iconfont 图标如何在uniapp中的tabBar使用
【Uniapp-Vue3】tabBar设置底部菜单选项及iconfont图标
XunLin233的博客
01-14 830
我们在pages中创建了3个页面，分别是首页页面，分类页面和用户页面，我们把这三个页面设置为底部菜单选项切换。底部菜单栏配置成功。
如何在UniApp中设置TabBar使用图标字体，同时保持其在微信小程序中的兼容性？
12-03
常用的图标库有阿里巴巴矢量图标库（iconfont）、Material Design Icons 等。 2. **注册字体**: 在项目资源目录下创建一个 fonts 文件夹，并将字体文件放置其中。在项目的 app.vue 或 main.js 中，通过 `uni....
怎么在uniapp项目中用阿里巴巴的icon
10-30
1. **引入字体文件**：下载阿里巴巴矢量图标库的字体文件，将其放置在项目合适位置。在项目中通过`@font-face`引入字体文件，示例代码如下： ```css @font-face { font-family: 'iconfont'; /* Project id 1713323 ...
微信小程序uniapp实现小图标转成SVN代码
m0_61169066的博客
02-09 948
实现效果 1.打开阿里巴巴矢量库，找到想要的图标，赋值SVN代码 iconfont-阿里巴巴矢量图标库 2.打开下方网址，将复制的svn代码赋值到网址指定位置，即可得到uniapp和小程序需要的SVN代码 https://codepen.io/jakob-e/pen/doMoML 3.代码 <template> <view class="display "> <view class="display justifybetween...
uni-app 怎么在tabbar使用阿里图标库
m0_75269526的博客
06-15 1234
uni-app使用阿里巴巴矢量图标库，uniapp设置tabbar,uniapp提示：微信小图标不支持使用字体图标的方式，只能下载png。
uniapp tabBar使用iconfont 字体图标
热门推荐
weixin_41623830的博客
05-07 1万+
&#xe 改为 \ue, 例如: "text": "\ue783" "tabBar":{ "iconfontSrc":"./static/font/iconfont.ttf", "list":[ { "text":"书架", "pagePath":"pages/index/index", "iconfont": { "text": "\ue610", "selectedTe
uniapp项目tabbar使用icon font(图标字体)时真机显示异常问题
urnotuname的博客
07-01 756
注：我这项目用icomoon，并且资源目录比较长，不用参考我的资源路径配置。
uniapp导航栏使用iconfont
EvaY_Yang的博客
08-23 1634
uniapp导航栏使用iconfont来配置多个按钮。
uni-app中使用iconfont字体图标教程
LW0512的博客
07-20 1348
uniapp tabbar配置 iconfont app.vue
uni-app项目中使用iconfont
weixin_43939519的博客
03-23 1780
最近在做uniapp 项目，正好要使用iconfont, 顺便做个小分享 1.首先要在iconfont 官网，点击 资源管理--我的项目，点击页面中的➕ 2. 选择需要的图标加入购物车，添加完毕，点击购物车选择添加至项目，选择创建的项目 3. 点击下载至本地，解压后，拷贝iconfont.css 至uniapp 项目中(我放在了common文件夹内)，点击在线链接，拷贝并替换iconfont.css 中的@font-face {} 部分内容4. 在App.vue 页面引入iconfont.css @
uniapp中使用iconfont图标库
m0_52364694的博客
09-08 408
分三步 一、下载所需的iconfont图标，并解压到uniapp项目common文件夹下(没有common文件夹可以新建一个) 二、mian.js中引入，引入代码 import ‘./common/解压后的文件夹名/iconfont.css’。 这里的"解压后的文件夹名"需要根据你自己解压文件来确定，每次下载iconfont图标都会不一样 三、使用 pages/index/index.vue中测试代码 ...
uniapp添加顶部导航栏并且使用iconfont图标
07-19 2779
三、在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里，然后再打开iconfont.css里查看unicode编码。四、最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启就实现了。特别需要注意的是要将字体css中的替换为\ue605，否则识别不了。六、在对应的页面用event监听，在事件里填写想实现的效果。一、在阿里矢量图选择自己喜欢的图标，然后点击收藏。二、右上角下载全部已经收藏了的图标代码。...
uniapp关于iconfont字体图标使用
无
04-29 2580
7、使用代码，主要是引用iconfont icon-search样式，注意u-search的placeholder设置不了样式，所以重写样式处理。5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录，并在App.vue里引入iconfont.css。6、iconfont.css代码，注意src只保留.ttf后缀名代码，路径设置为iconfont.ttf文件放置路径。1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择需要的图标添加到购物车。
uniapp引入inconfont自定义导航栏
qq_55272229的博客
08-05 2188
2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录。2.下载到本地解压后,将其中的ttf文件,放在static静态目录下。3.在page.json中对全局文件进行配置tabBar(导航图标)4.此时就可以在list对导航item添加iconfont属性。1.同上下载到本地,但是需要在项目设置中把base64码下载。uniapp本身的全局设置中有个iconfontsrc属性。1.iconfont将需要的icon添加至项目。4.app.vue进行全局css样式导入。
wd-tabbar-item如果使用阿里巴巴矢量图标
最新发布
12-12
wd-tabbar-item 使用阿里巴巴矢量图标的方法可以参考以下步骤： 1. **获取矢量图标**：添加 `images` 文件，从阿里巴巴矢量图标库免费获取想要的矢量图并添加到该文件中[^2]。 2. **编辑 `app.json` 文件**：在 `app.json` 文件中进行代码编辑，设置 `tabBar` 相关属性，包括颜色、背景色、图标路径等。示例代码如下： ```json "tabBar": { "color": "", "selectedColor": "", "backgroundColor": "", "position": "bottom", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/home.png", "selectedIconPath": "icons/home - o.png" }, { "pagePath": "pages/category/index", "text": "分类", "iconPath": "icons/category.png", "selectedIconPath": "icons/category - o.png" }, { "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "icons/cart.png", "selectedIconPath": "icons/cart - o.png" }, { "pagePath": "pages/user/index", "text": "我的", "iconPath": "icons/my.png", "selectedIconPath": "icons/my - o.png" } ] } ``` 这里的 `iconPath` 和 `selectedIconPath` 可根据实际获取的矢量图标文件名进行修改[^1]。 3. **创建自定义组件文件夹和文件**：点击加号，在根目录新建一个 `custom - tab - bar` 文件夹。然后右键该文件夹，点击新建 `components`，输入 `index` 并回车，自动创建四个文件。由于系统会自动识别 `tabBar` 页面，此时小程序底部会出现相应内容，代表创建成功，之后在该目录下编写代码即可[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值