uniapp如何使用本身的字体图标

图标展示文档地址 https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html

https://ext.dcloud.net.cn/plugin?id=28
打开uniAPP的字体图标文件地址，下载demo到本地，一会复制里面的字体、js、.vue文件

示例文件里的这写文件复制到自己的项目的static文件夹里


全局注册图标组件（在main.js中）

// main.js
import Vue from 'vue'
import App from './App'// 导入uni-icons组件
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'// 全局注册uni-icons组件
Vue.component('uni-icons', uniIcons)// 创建Vue实例
const app = new Vue({...App
})// 挂载Vue实例
app.$mount()

在页面里如何使用

<template><view class="container"><!-- 用户信息 --><view class="user-card"><uni-icons type="person" size="40" color="#fff"></uni-icons><text class="username">会员用户</text></view></view>
</template>

不要放到 text 标签里，用text标签包裹会显示不出图标

<uni-icons type="person" size="40" color="#fff"></uni-icons>