1,新建个人中心页面
2,在pages.json中配置tabbar
"tabBar": {
"color": "#888",
"selectedColor": "#0199FE",
"list": [{
"pagePath": "pages/index/index",
"text": "圈子",
"iconPath": "static/images/quanzi.png",
"selectedIconPath": "static/images/quanzi-fill.png"
}, {
"pagePath": "pages/self/self",
"text": "我的",
"iconPath": "static/images/user.png",
"selectedIconPath": "static/images/user-fill.png"
}]
},
其中iconPath和selectedIconPath使用的图片在静态资源文件夹中找到。
3,在项目中引入iconfont字体库
- 从阿里巴巴图标网站(需要注册登录,建立自己的项目)下载自己项目的图标库。
2. 解压下载的文件,并将4个文件拷贝到项目静态资源文件夹中
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import '@/static/fonts/iconfont.css';
</style>
- 修改iconfont.css中的引入相对地址
src: url('@/static/fonts/iconfont.woff2?t=1668693826981') format('woff2'),
url('@/static/fonts/iconfont.woff?t=1668693826981') format('woff'),
url('@/static/fonts/iconfont.ttf?t=1668693826981') format('truetype');
- 使用下载的样式图标
<text class="iconfont icon-a-21-xiugai"></text>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/135740.html