当前位置: 首页 > article >正文

【Uniapp-Vue3】iconfont图标库的使用

先在iconfont图标库中将需要的图标加入购物车 

点击右侧购物车的图标 

 点击添加至项目,可以选中项目进行加入,也可以点击文件加号创建一个新的项目并添加

 

加入以后会来到如下界面,点击下载至本地

双击打开下载的.zip文件 

 

将.css和.ttf文件进行复制

 

在项目的static文件下创建fonts文件,将这两个文件粘贴进来

打开iconfont.css文件,将红色框选部分删除,对箭头部分进行修改

变成如下这样 

 在App.vue文件中进行引入:

@import "@/static/fonts/iconfont.css";

在font class状态下点击复制代码 

 在uni-icons标签中使用图标,其中type就是刚才复制的代码:

<uni-icons custom-prefix="iconfont" type="代码" ></uni-icons>


http://www.kler.cn/a/532797.html

相关文章:

  • Redis代金卷(优惠卷)秒杀案例-多应用版
  • 读算法简史:从美索不达米亚到人工智能时代05天气预报
  • selenium记录Spiderbuf例题C03
  • GRN前沿:利用DigNet从scRNA-seq数据中生成基于扩散的基因调控网络
  • 读书笔记 | 《最小阻力之路》:用结构思维重塑人生愿景
  • FPGA学习篇——开篇之作
  • kubernetes 高可用集群搭建
  • 文献学习笔记:中风醒脑液(FYTF-919)临床试验解读:有效还是无效?
  • git进阶--1---HEAD、工作树和索引之间的区别与联系
  • git进阶--3---git pull和git fetch的区别与联系
  • git进阶--2---冲突的产生和解决
  • 第九篇:NoSQL 数据库与大数据
  • 【Unity踩坑】Unity项目管理员权限问题(Unity is running as administrator )
  • kubernetes-部署性能监控平台
  • Hive on Spark优化
  • 解锁动态规划的奥秘:从零到精通的创新思维解析(7)
  • 【C#】Process、ProcessStartInfo启动外部exe
  • C++11新特性之long long超长整形
  • 「全网最细 + 实战源码案例」设计模式——策略模式
  • 20250108慧能科技前端面试
  • 如何在 Python 中创建表的完整指南,常见功能及问题解决方案有哪些?
  • Web - CSS3浮动定位与背景样式
  • 备考蓝桥杯嵌入式4:使用LCD显示我们捕捉的PWM波
  • 多功能提示词模板
  • MapReduce分区
  • Vue2 项目中使用 Swiper