uni-app中使用iconfont字体图标

本文详细介绍了如何从阿里巴巴矢量字体图标库中选择并下载所需的图标,通过创建项目、下载图标、本地化资源、修改引用路径及全局引入等步骤,实现图标在项目中的高效利用。

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

在一些项目中,我们需要使用阿里巴巴矢量字体图标库的图标,如果单个下载势必过于麻烦,这个就是自己创建好然后进入即可。

第一步,找到阿里巴巴矢量字体图标库,登录官网 。把你需要的图标添加至购物车,创建项目

 

第二步,进入项目,首先选择Unicode,然后点击下载至本地

第三步,找到该文件,解压,然后把该解压好的文件放到所需项目的static 文件里

第四步,找到你刚才引入的图标文件(iconhome)里面的iconfont.css文件,把里面路径改为本地路径,如下

第五步,在App.vue文件全局引入

第六步,再所需页面如下方法引入,iconfont为必填,icon-weijin为你所需要字体图标的名字

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值