uni-app如何引入阿里图标库 (其他项目一般都通用)

uniapp引入阿里图标库,话不多说,代码走起!!!!

  1. 第一步:www.iconfont.cn/进入阿里图标库官网
  2. 在这里插入图片描述
  3. 第二步:把购物车中的图标添加到项目中,这个项目是在阿里图标中建立的一个文件夹,如果之前没有建立过,可以点击添加项目,项目名字随便写在这里插入图片描述
  4. 第三步:右上角点击随便建个项目,为的是下边我们修改在线地址,方便查看复制在线地址所用,跟你所写的uniapp项目并无关联,随便写就好,最后还要下载到本地。在这里插入图片描述

第四步:去下载的代码中找到iconfont.css这个文件复制粘贴到你自己的项目中去 然后 在你的项目中打开刚刚粘贴的iconfont.css文件,去阿里图标库找到刚刚那个添加了图标的项目在这里插入图片描述
第五步:点击 unicode后点击复制代码,在这里插入图片描述
第六步:替换掉iconfont.css中@font-face这段,替换完如下图:在这里插入图片描述
第七步:切记不要在前面加https,否则会有路径错误,此处就是坑,加了就会有路径错误无法找到图标!!!
使用:首先在main.js中根据你自己的路径引入iconfont.css
在这里插入图片描述
第八步:然后使用的时候这么用
在这里插入图片描述

写class类名,一定要加类名iconfont,然后再添加对应图标的类名就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值