本文详细介绍了如何在阿里矢量图标平台上注册、新建项目，添加图标，以及如何在项目中引用和使用图标的过程，包括批量操作和代码示例。
原文链接：https://blog.csdn.net/u012820292/article/details/130853248
记录一下自己成功的步骤，很多是从网上找的，但是网上的写的很散，看一个成功不了，我综合了两篇文章写的。
传送门：
阿里矢量图标
1、按步骤：注册 > 登录 > 资源管理 > 我的项目
2、新建项目
3、项目名称随便写，但是不要写el-icon开头，因为和ElementUI内的图标重名，可能导致用不了。（虽然我以el-icon开头了，但是也成功用上）
4、填完后点击新建，回到首页，搜索想要的图标，加入购物车。
如果很多都想加入，可用以下代码批量加入，代码不会加入下一页的，可以手动翻页后再执行一遍。
var icons = document.querySelectorAll('.icon-gouwuche1');
var auto_click = function(i) {
if (i < icons.length) {
setTimeout(function() {
icons.item(i).click();
auto_click(i + 1);
}, 600);
}
};
auto_click(0);
不会用？谷歌浏览器F12进开发者模式，点击Console（控制台）输入以上代码，回车键确定
5、加完后，点击右上角的购物车，选择添加至项目
6、选择最开始创建的文件夹，确定。
7、下载到本地，解压
8、 去掉不用的其他文件，蓝色的文件可以删，不删也没影响。
9、在项目目录下，src > assets > icon （创建个icon文件，名字可以随意取），将上面剩余的文件全部拷到这个icon文件夹下。
10、找一下项目里面的main.js文件，引入刚才创建的icon文件夹下的iconfont.css文件。
11、打开iconfont.css这个文件，能看到红色圈出来的图标
12、现在我们引用它，
我要引用这个，复制选中的名字，
也就是复制el-icon-musicgeci注意前面的.和后面的:都不要复制， 我们在要引用的地方加个div标签，里面套个i标签试一下
<div >
<i class="iconfont el-icon-musicgeci"></i>
</div>
效果
虽然很小，我就不管了，教程到此结束。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
扫一扫
855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
