程序外包网站,网页版qq邮箱登录入口电脑版,室内装修效果图,那间公司做网站好今天要写个uniapp的移动端项目#xff0c;底部tabBar需要添加图标#xff0c;以往都是以图片的形式引入#xff0c;但是考虑到不同甲方的主题色也不会相同#xff0c;使用图片的话#xff0c;后期变换主题色并不友好#xff0c;所以和UI商量之后#xff0c;决定使用icon…今天要写个uniapp的移动端项目底部tabBar需要添加图标以往都是以图片的形式引入但是考虑到不同甲方的主题色也不会相同使用图片的话后期变换主题色并不友好所以和UI商量之后决定使用iconfont阿里巴巴矢量图标库。 想着就是需要简单的引入图标即可但万万没想到uniapp的坑让我猝不及防好在摸索了大半天总算有个好的结果为了记录这次跌倒的坑决定写下来希望能帮到其他人。 不过丑话说前面每个人报错的原因都不一定相同请自己进行排查错误之后再针对性参考别人的意见当然代码这东西很玄学有的时候什么都对就是出不来也不是没有可能的。
在iconfont图标库选择自己需要用的图标地址 打包下载至本地放在static文件夹中注意我没有去调整css文件里相对路径或者在线地址什么的(因为调整之后变成小方块了图标啥也不显示)就打包下来有什么文件就放什么文件就行了避坑如下在pages.json文件中
tabBar: {color: #000000,selectedColor: #000000,borderStyle: white,backgroundColor: #ffffff,iconfontSrc: /static/icon/iconfont.ttf,//注意这里一定要在tabBar里与list同级的位置引入iconfont的src从static开始写list: [{pagePath: pages/index,iconfont: {text: \ue604,//这里也需要注意使用的是iconfont里的Unicode类型下的代码标识但是引入时#xe604;需要将#x改为\u否则无法识别selectedText: \ue604,color: #e6e6e6,selectedColor: #07C160},text: 首页}, {pagePath: pages/fillingList/index,iconfont: {text: \ue605,selectedText: \ue605,color: #e6e6e6,selectedColor: #07C160},text: 旅游}, {pagePath: pages/mine/index,iconfont: {text: \ue677,selectedText: \ue677,color: #e6e6e6,selectedColor: #07C160},text: 个人},]},icon图标显示小方块搜索了很多文档说需要将iconfont.css文件里的src改为绝对路径啥的我不知道为啥按照他们的改了之后不报错也出不来。回归了原始的代码之后iconfont的原文件我什么都没改就是需要注意下iconfontSrc的书写位置和地址引入问题以及代码标识前缀改为\u。 完美~ 收工
