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中)

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>
相关推荐
gerrgwg11 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
开心不就得了13 小时前
自定义脚手架
前端·javascript
卷Java13 小时前
违规通知功能修改说明
java·数据库·微信小程序·uni-app
星晨雪海15 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉66615 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
excel16 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡16 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
心.c19 小时前
一套完整的前端“白屏”问题分析与解决方案(性能优化)
前端·javascript·性能优化·html
俺会hello我的19 小时前
舒尔特方格开源
前端·javascript·开源