【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>

相关推荐
zh73141 小时前
支付宝沙盒模式商家转账经常出现 响应异常: 解包错误
前端·阿里云·php
ZHOU_WUYI1 小时前
用react实现一个简单的三页应用
前端·javascript·react.js
samroom1 小时前
Vue项目---懒加载的应用
前端·javascript·vue.js·性能优化
手机忘记时间2 小时前
在R语言中如何将列的名字改成别的
java·前端·python
郝郝先生--2 小时前
Flutter 异步原理-Zone
前端·flutter
geovindu2 小时前
vue3: pdf.js5.2.133 using typescript
javascript·vue.js·typescript·pdf
花开花落的博客3 小时前
uniapp 不同路由之间的区别
前端·uni-app
七七小报3 小时前
uniapp-商城-46-创建schema并新增到数据库
uni-app
Mr.app3 小时前
uniapp自定义导航栏搭配插槽
uni-app
whatever who cares3 小时前
React 中 useMemo 和 useEffect 的区别(计算与监听方面)
前端·javascript·react.js