vue引入并使用阿里巴巴iconfont图标流程
为什么要使用阿里图标库:
有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。
这时候我们需要去到阿里的图标库里找找,这里的图标非常多,完全可以满足一切需求了。
其实方法有好几种,我来说一下我认为最简单的一种:
1,先百度到这个网站点进去
2.在这里可以搜索你想要的图标(图标很全面,基本可以满足)
3.在这里比如我想要第一个,就加入到购物车
4.加入到购物车之后就可以在右上角看到自己购物车里边的图标(加入几个都行哦,到时候导入到VUE中都可以使用了!)
5.点开购物车之后可以看到自己想要的图标,你现在需要的是将它们添加到一个项目中,如果没有项目的话,可以点击右侧抽屉的右上角,新建一个项目。
6.添加完成之后,回到主页找到我的项目
7.点击本地下载,然后解压
8.将解压好的文件放到项目中
9.点开css文件,里边的名字就是你待会可以直接用到的class名称
10.到这里,你的图标下载好,也放到项目中了。然后就去main.js中把iconfont中的css文件引入进去。这里注意,如果你图标文件放的位置和我不一样,记得换路径
11.到这里所有工作已完成,就差引用class。(直接引用就好)