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. 导航自定义字体图标的使用
- 将iconfont.ttf字体文件下载下来放在static文件夹中
- 在
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开头
}
]
}
}
