最近学习uniapp,写了个小demo,想着引用阿里图标,现在记录一下如何在uniapp的项目中引入阿里图标,此处遇到一个坑,写出来仅供避坑!!!
第一步:www.iconfont.cn/进入阿里图标库官网,找…

,之后下载代码,并且将购物车中的图标添加到项目中,这个项目是在阿里图标中建立的一个文件夹,如果之前没有建立过,可以点击添加项目

右上角点击随便建个项目,为的是下边我们修改在线地址,方便查看复制在线地址所用,跟你所写的uniapp项目并无关联

第二步:

去下载的代码中找到iconfont.css这个文件复制粘贴到你自己的项目中去
第三步:在你的项目中打开刚刚粘贴的iconfont.css文件,去阿里图标库找到刚刚那个添加了图标的项目

选择unicode后点击复制代码,

替换掉iconfont.css中@font-face这段,替换完如下图:

切记不要在前面加https,否则会有路径错误,此处就是坑,加了就会有路径错误无法找到图标!!!
第四步:使用:首先在main.js中根据你自己的路径引入iconfont.css

然后使用的时候

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