在一个app项目中,导航栏需要定义多个icon,而原生的导航栏图标样式不满足需求,其次是该页面是嵌套的H5页面,也不方便去自定义导航栏,所以第一个想法是在pages文件中引入icon。
"titleNView": {
"buttons": [
{
"type": "none",
"text": "\ue606",
"fontSrc": "/static/share.ttf",
"fontSize": "40rpx",
"width":"50px"
},
{
"type": "none",
"text": "\ueb7b",
"fontSrc": "/static/refresh.ttf",
"width":"30px"
}
]
},
但是第二次引入的图标显示错误或者不显示,排查问题,发现是在项目中已有图标库的情况下我引入了第二套图标库导致。
解决办法:
在第二次引入图标的时候,需要进行项目设置,具体步骤如下:
点击项目设置,修改fontFamily,一般是默认的iconfont,如果第二次引入的时候,fontfamily一样,那么就会导致显示错误或者无法显示的问题
修改完成之后,保存下载,进行后续操作即可。
其实在实际的使用中,iconfont中的图标不满足我们自己的需求,但是在开发中,不适合通过引入图片的方式显示图标,换言之,只能通过引入icon的方式来显示,那么我们可以自己先把图标上传iconfont,然后再进行上面操作即可,具体操作如下:
1.准备所需图标的svg文件
2.在iconfont官网点击上传
3.上传图标的svg文件,并进行相应的配置,尤其是名称
4.提交审核就好,需要几分钟,审核通过之后,如果你添加至自己的项目,那么你在自己的项目中就可以看见,然后在进入后续下载引入操作就可以了。