uniapp tabBar iconfont
时间: 2023-08-29 18:10:27 浏览: 148
Uniapp 中可以使用 iconfont 作为 tabBar 的图标。具体步骤如下:
1. 在 iconfont 官网上选择需要的图标,添加到购物车中。
2. 进入购物车,选择需要的图标,点击下载代码。
3. 解压下载的代码,将其中的 iconfont.ttf 文件复制到 uniapp 项目的 static 目录下。
4. 在 App.vue 文件中引入 iconfont.css 文件:
```
<style>
@font-face {
font-family: 'iconfont';
src: url('static/iconfont.ttf') format('truetype');
}
.uni-tabbar .uni-tabbar-item .uni-tabbar-icon {
font-family: 'iconfont' !important;
font-size: 24px !important;
}
</style>
```
5. 在 tabBar 配置中,将 icon 的值设置为类似于 "\ue600" 的代码,如下:
```
"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"icon": "\ue601",
"selectedIcon": "\ue601"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"icon": "\ue604",
"selectedIcon": "\ue604"
}
]
}
```
这样就可以在 tabBar 中使用 iconfont 作为图标了。
阅读全文