uni小程序原生tabbar怎么使用iconfont
时间: 2023-08-29 09:04:46 浏览: 102
微信小程序tabbar图标素材
5星 · 资源好评率100%
uni小程序原生tabbar也可以使用iconfont,具体步骤如下:
1. 在iconfont网站上选择需要的图标,添加到购物车中并下载。
2. 解压下载的压缩包,将其中的iconfont.ttf文件复制到uni小程序的static目录下。
3. 在app.vue文件中引入iconfont.css文件,可以通过以下代码实现:
```
<style>
@font-face {
font-family: 'iconfont';
src: url('./static/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 24rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
```
4. 在tabbar中使用iconfont,只需要将icon的值改为iconfont即可,例如:
```
<tabbar>
<tabbar-item icon="iconfont" text="首页"></tabbar-item>
<tabbar-item icon="iconfont" text="消息"></tabbar-item>
<tabbar-item icon="iconfont" text="我的"></tabbar-item>
</tabbar>
```
这样就可以在uni小程序的原生tabbar中使用iconfont了。注意,需要将iconfont对应的Unicode码放在标签内,并使用对应的类名`.iconfont`来设置字体。
阅读全文