uni-app字体图标的一些问题

1. iconfont组件使用

iconfont.css中如果使用iconfotn的线上字体注意一定要添加http,要不然图标无法正常显示

现在部署时iconfont引入的ttf文件可以转成base64格式,优化图标载入速度;转base64的工具可使用https://www.giftofspeed.com/base64-encoder/,具体引入格式如下

// iconfont.css
@font-face {
    font-family: 'webfont-base';
    src: url(data:font/truetype;charset=utf-8;base64,XXXXXXXXXXXXXXXXX) format('truetype');
    font-weight: normal;
    font-style: normal
}

2. 导航自定义字体图标的使用

1. 将iconfont.ttf字体文件下载下来放在static文件夹中
2. 在pages.json中配置字体图标导航

"app-plus": {
    "titleNView": {
        "autoBackButton": true,
        "titleText": "组织关系",
        "splitLine": {
            "color": "#F0F0F0"
        },
        "buttons": [ //原生标题栏按钮配置,
            {
                "color": "#000",
                "float": "right",
                "fontSize": "20",
                "fontSrc": "/static/font/iconfont.ttf",
                "text": "\ue61f"  // 这里的编号为iconfont的unicode编码必须以\u开头
            }
        ]
    }
}