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
}

<!-- db-icon.vue -->
<template>
    <view :class="'iconfont ' + type" :style="{ color: color,'font-size': size + 'rpx' }" @click="_onClick" />
</template>

<script>
    export default {
        name: 'UniIcon',
        props: {
            type: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: 'red'
            },
            size: {
                type: [Number, String],
                default: 36
            }
        },
        methods: {
            _onClick() {
                this.$emit('click')
            }
        }
    }
</script>

<style>
    @import './iconfont.css';

    .iconfont {
        display: inline-block;
        font-weight: 400;
    }
</style>

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开头
            }
        ]
    }
}