uni-app引入字体图标详细步骤

博主因学习时网上缺乏uni-app引入矢量图的详细方法,故记录操作步骤。包括在官网下载图标文件,将六个文件放入项目,在全局App.vue中引入,解决引入报错问题,修改路径后即可在页面正常使用,通过复制对应类名调用图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前自己在学习中不会引入矢量图,在网上搜索方法,没找到一个详细的,自己动手记录一下。

uni-app引入字体图标

1、在案例矢量图官网选择需要的图标进行下载
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
2、得到如下文件
在这里插入图片描述
3、将文件中的六个文件放进项目里面,就是下面截图的那六个即可
在这里插入图片描述
4、在全局App.vue中引入
在这里插入图片描述
引入后会报如下错误
在这里插入图片描述
5、解决方式
进入你引入的字体图标中的iconfont.css中注意下下图标红的地方路径需要修改一下就好了。
在这里插入图片描述
6、按照如下图的修改方式即可解决
~@:是固定写法
static:就是存放字体图标的文件的文件夹
icon:是字体图标的文件夹
在这里插入图片描述
7、然后就可以在页面正常使用了
在下载的字体图标的文件中店家那个html文件进入如下页面
在这里插入图片描述
复制你需要使用的字体图标对应的类名
在这里插入图片描述
iconfont必须加上,iconfont后面的类名就是你要使用的字体图标的类名

在这里插入图片描述

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值