i***@163.com
i***@163.com
  • 发布:2022-04-20 09:10
  • 更新:2022-04-21 11:17
  • 阅读:1635

App tabBar iconfont配置无效,真机上icon不显示

分类:uni-app

iconfont配置应该没问题,页面中可以正常显示

pages.json其中一个tabbar配置

{  
            "pagePath": "pages/notice/notice",  
            "text": "公告",  
            "iconfont": {  
                "text": "\ue69b",  
                "selectedText": "\ue69b",  
                "fontSize": "12px",  
                "color": "#000",  
                "selectedColor": "#f00"  
            }
2022-04-20 09:10 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

注意: 设置 iconfont 属性时,pages.json iconfontSrc 需要指定字体文件,参考下面的配置

// pages.json  
{  
  "tabBar": {  
    "iconfontSrc":"static/iconfont.ttf",  
    "list": [  
      {  
        "pagePath": "pages/index/index",  
        "text": "Tab1",  
        "iconfont": {  
          "text": "\ue102",  
          "selectedText": "\ue103",  
          "fontSize": "17px",  
          "color": "#000000",  
          "selectedColor": "#0000ff"  
        }  
      }  
    ]  
  }  
}
  • Potter

    配置成你这样也不行

    2022-05-30 20:40

  • Potter

    "tabBar": {

    "iconfontSrc": "static/font/iconfont.woff",

    "color": "#333333",

    "selectedColor": "#64CD83",

    "borderStyle": "black",

    "backgroundColor": "#ffffff",

    "height": "55px",

    "list": [

    {

    "pagePath": "pages/home/index",

    "text": "首页",

    "iconfont": {

    "text": "\uebe8",

    "selectedText": "\uebe8",

    "font-size": "24px",

    "color": "#4D4D4D",

    "selectedColor": "#E94A40"

    }

    },

    {

    "pagePath": "pages/category/index",

    "text": "分类",

    "iconfont": {

    "text": "\uebe8",

    "selectedText": "\uebe8",

    "font-size": "24px",

    "color": "#4D4D4D",

    "selectedColor": "#E94A40"

    }

    },

    {

    "pagePath": "pages/cart/index",

    "text": "购物车",

    "iconfont": {

    "text": "\uebe8",

    "selectedText": "\uebe8",

    "font-size": "24px",

    "color": "#4D4D4D",

    "selectedColor": "#E94A40"

    }

    },

    {

    "pagePath": "pages/my/index",

    "text": "我的",

    "iconfont": {

    "text": "\uebe8",

    "selectedText": "\uebe8",

    "font-size": "24px",

    "color": "#4D4D4D",

    "selectedColor": "#E94A40"

    }

    }

    ]

    },

    2022-05-30 20:41

  • DCloud_UNI_Anne

    回复 Potter: 哪个HX版本?ios还是android?请提供下可复现的最小示例(上传附件)

    2022-05-30 20:50

  • Potter

    回复 DCloud_UNI_Anne: 微信小程序,最小示例稍等一下

    2022-05-30 20:57

  • Potter

    回复 DCloud_UNI_Anne: https://github.com/yxw007/uniapp_issue/tree/tabbar

    2022-05-30 21:11

  • Potter

    回复 DCloud_UNI_Anne:

    复现步骤:



    1. git clone https://github.com/yxw007/uniapp_issue

    2. checkout tabbar

    3. yarn

    4. yarn dev:mp-weixin 看小程序的控制台警告日志,devtoolsconfig.js?t=wechat&s=1653915915254&v=8317b743abdc2f018c38a6741f823b44:3 无效的 app.json tabBar.list[0]["iconfont"]、app.json tabBar.list[1]["iconfont"]、app.json tabBar.list[2]["iconfont"]、app.json tabBar.list[3]["iconfont"]、app.json tabBar["height"]

    2022-05-30 21:14

  • DCloud_UNI_Anne

    回复 Potter: 注意平台兼容说明,目前仅支持App

    2022-05-30 21:14

  • Potter

    回复 DCloud_UNI_Anne: 好吧~

    2022-05-30 21:19

  • 加勒比路飞

    回复 DCloud_UNI_Anne: app ios端不行呀

    2023-03-29 13:55

zhaoyu2020

zhaoyu2020 - 一只小小鸟

楼主的问题解决了吗
我用了字体图标但是根本没显示出来

  • i***@163.com (作者)

    除了tabbar其他地方字体图标可以显示的

    2022-04-22 15:31

  • zhaoyu2020

    回复 i***@163.com: 没注意他只支持app....

    2022-06-09 14:19

该问题目前已经被锁定, 无法添加新回复