目的:在uni项目中,使用阿里巴巴矢量图标

1.到官网,并登录:

https://www.iconfont.cn/

2.选择自己想要的图标,并加入购物车。如图:

阿里巴巴矢量图标的使用

3.点击购物车,点击下载代码:

阿里巴巴矢量图标的使用

4.解压,获得一些文件

阿里巴巴矢量图标的使用

5.右键打开iconfont.css,然后全选,复制。

阿里巴巴矢量图标的使用

6.找到自己uni项目根目录面的App.vue文件,在/*每个页面公共css*/下面,粘贴刚刚复制的代码。

阿里巴巴矢量图标的使用

这里当然会报错,因为路径不对。

7.把第4步中解压或的文件,除了demo.css和demo_index.html不要以外,通通复制到自己的项目里面去

阿里巴巴矢量图标的使用

8.修改第6步复制代码,主要就是修改加载路径。看见有url()的地方,通通改为自己项目的相对路径,注意写法。

阿里巴巴矢量图标的使用

阿里巴巴矢量图标的使用

现在点击保存,就不会报错了。看到这里,恭喜你,已经完成了引入。之后就是怎么使用了。

9.用浏览器打开第4步解压获得的demo_index.html文件,并选择,Font Class.

阿里巴巴矢量图标的使用

10.滑到底部,有使用步骤,第一步我们已经完成了。直接看第二步,复制代码,放在我们的项目中。

阿里巴巴矢量图标的使用

11.然后,把后面的xxx替换为,我们想要的图标即可。

阿里巴巴矢量图标的使用

阿里巴巴矢量图标的使用

12.over.止于还有其他两种引入方式,建议自己查看其他博客。

相关文章: