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>
相关推荐
VT.馒头16 小时前
【力扣】2725. 间隔取消
javascript·leetcode·1024程序员节
一 乐17 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再17 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
游戏开发爱好者817 小时前
iOS 开发推送功能全流程详解 从 APNs 配置到上架发布的完整实践(含跨平台上传方案)
android·macos·ios·小程序·uni-app·cocoa·iphone
菩提树下的凡夫17 小时前
前端vue的开发流程
前端·javascript·vue.js
栈狮17 小时前
uniApp使用支付宝云开发问题集合
uni-app
Heyuan_Xie17 小时前
uni-app facebook登录
uni-app·uni-app插件
Heyuan_Xie17 小时前
uni-app OCR图文识别
uni-app·ocr·uni-app插件
Zz燕17 小时前
G6实战_手把手实现简单流程图
javascript·vue.js
Asort18 小时前
JavaScript设计模式(二十一)——策略模式:灵活算法的艺术与实战
前端·javascript·设计模式