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

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

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

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

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