uniapp 引入icon，tabBar使用icon

已于 2022-10-25 13:54:32 修改
阅读量4.4k 收藏 17
点赞数 2
分类专栏： uniapp view 文章标签： uni-app vue.js 前端
于 2022-09-19 16:40:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45289656/article/details/126936244
版权

阿里巴巴图标库下载完之后把文件夹放到项目中，我这里放到了static下的icon中

在这里插入图片描述
然后在iconfont.css文件中需要修改一下路径，不然会报错，找不到文件

在这里插入图片描述
我这边是在app.vue中引入的

在这里插入图片描述

然后在单独文件中使用即可

如果是在tabBar中使用，则需要在tabBar单独使用iconfontSrc引入

然后text中的编码需要改一下

前面要添加一个u

在这里插入图片描述效果图
在这里插入图片描述

uniapp 底部菜单_uniapp 小程序实现自定义底部导航栏（tarbar）
weixin_39932762的博客
12-23 1082
class=".tarbar-list":style="{background: tabBar.backgroundColor,color: tabBar.color,'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,'border-bottom': tabBar.position ...
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2261
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uniapp自定义tabbar图标样式
10-13
uniapp自定义tabbar图标样式uniapp自定义tabbar图标样式
uniapp中tabBar使用iconfont图标
最新发布
2401_83213163的博客
03-16 556
2、在小程序中使用需要下载成png格式保存到本地后，复制到sta​​​​​​​tic中，用iconpath调用即可。
解决uniapp的tabBar使用iconfont图标显示方块
qq_43687594的博客
07-29 3130
icon图标显示小方块，搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的，我不知道为啥，按照他们的改了之后，不报错，也出不来。不过丑话说前面，每个人报错的原因都不一定相同，请自己进行排查错误之后，再针对性参考别人的意见，当然，代码这东西很玄学，有的时候，什么都对，就是出不来，也不是没有可能的。想着就是需要简单的引入图标即可，但万万没想到，uniapp的坑，让我猝不及防，好在摸索了大半天，总算有个好的结果，为了记录这次跌倒的坑，决定写下来，希望能帮到其他人。
在uni.app中引入并在底部导航栏中使用icon字体图标
weixin_46254090的博客
09-27 2417
icon在uni.app中tabbar的用法
设置tabber角标 icon
weixin_44286765的博客
03-30 457
【代码】设置tabber角标 icon。
uniapp字体图标的使用
12-31
1. 在uniapp组件中，我们可以通过`<u-icon>`组件来使用字体图标，例如： ```html <u-icon name="logo-ionicons" size="30" color="#007aff"></u-icon> ``` 这里的`name`属性对应字体库中的图标名称，`size`表示图标...
【uniapp】开发微信小程序自定义底部tabbar
热门推荐
韩旭不会敲代码吧的博客
04-19 1万+
uniapp开发微信小程序自定义底部tabbar
uniapp，使用u-tabbar2.X 实现不同权限不同tabBar
WessonX的博客
03-13 5871
uniapp开发，使用u-tabbar实现不同权限显示不同的tabbar
uniapp小程序tabbar图标
07-25
uniapp小程序tabbar整套图标，包含选中和非选择的
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uniapp van-tabbar
01-07
### 如何在 UniApp 项目中使用 `van-tabbar` 组件 #### 安装 Vant Weapp 组件库 为了能够在 UniApp 中使用 `van-tabbar`，首先需要安装 Vant Weapp 组件库。可以通过 npm 或者 yarn 来完成这一步骤。 ```bash npm ...
【Uniapp-Vue3】tabBar设置底部菜单选项及iconfont图标
XunLin233的博客
01-14 644
我们在pages中创建了3个页面，分别是首页页面，分类页面和用户页面，我们把这三个页面设置为底部菜单选项切换。底部菜单栏配置成功。
uni-app 界面TabBar中间大图标设置的两种方法
halo1416的博客
11-21 2084
最近写基于uni-app写app项目的时候，底部导航栏 中间有一个固定的大图标，并且没有激活状态。这里记录下实现方案。// 监听底部tabbar 中间按钮“党组织”，跳转对应的页面});})该方法跳转后是进入二级页面，底部导航栏会消失，顶部会有返回按钮。适应于新增类型的页面。
uniapp tabbar
emoji111111的博客
02-21 432
uniapp tabbar
uni-app中如何配置tabbar效果
jnfy的博客
10-17 1060
uni-app中如何配置tabbar效果
tabBar设置底部菜单以及选项iconfont图标
dengshuweng的博客
09-07 695
在官网里面可以了解到tabBar组件的一些知识和注意点：需要给页面设置一个底部导航的话可以在pages.json里面设置一个tabBar标签，在其里面设置pagePath和text属性。可以看的pagePath是跳转的地址，text是下面导航的文字提示。如果是微信小程序的话只有一个text是会报错的。多添加一个list还可以对于底部导航进行一些页面效果展示的修改属性，比如：对比修改之前的效果也可以将底部导航移动到顶部，需使用position属性，不过仅有微信小程序支持。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值