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

Qlittleboy2025-09-15 20:35

图标展示文档地址 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中）

javascript 复制代码

// 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()

在页面里如何使用

html 复制代码

<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标签包裹会显示不出图标

html 复制代码

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