怎么使用阿里巴巴矢量图标

1.打开阿里巴巴矢量图标库官网（https://www.iconfont.cn/），有账号的可以直接登录，没有账号的需要注册一个。
2.查找想要的图标。

简单使用

如果只是需要一两个图标：例如想要倒三角，直接搜索“倒三角”，便出现相应的图标，点击所需图标的”下载“按钮

然后会出现弹框，在这里可以选择想要的颜色

可选择相应的下载格式：
（1）若选择PNG格式，将图片下载下来直接html中插入。（图像文件的 URL视你图片的位置而定。以下是html和图片文件同一目录的情况）

<img src="/1.png" alt="">

（2）如果是点击了“复制SVG代码”按钮，将复制下来的代码直接在html中粘贴。（很长,我不太推荐）

<svg t="1630999448373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3389" data-spm-anchor-id="a313x.7781069.0.i1" width="200" height="200"><path d="M1024 255.996 511.971 767.909 0 255.996 1024 255.996z" p-id="3390"></path></svg>

大批量使用

如果是大批量需要用到阿里巴巴矢量图标库，可将图标添加入项目：

然后进入“我的项目”，

（1）本地使用

点击“下载至本地”按钮

下载下来的文件解压后，里面大概是这样子：

下面我用最简单的例子展示三种方式使用矢量图标：

在元素里面通过link元素引入刚刚下载好并解压的文件里面的iconfont.css文件

<link href="font/iconfont.css" rel="stylesheet" type="text/css" />

<1>方式一Unicode

复制所需图标的Unicode（如上图所示）,然后

<i class="iconfont">&#xe62a;</i>

立即出效果：

<2>方式二Font class

复制所需图标的类名（如上图所示），然后

<i class="iconfont icon-daosanjiao"></i>

（注意：元素不能只加当前所想展示图标的类名，记得一定还要加上类名iconfont。）
立即呈现出一样的结果

<3>方式三Symbol

在标签底部引入js文件

<script src="font/iconfont.js"></script>

html

<svg class="icon" aria-hidden="true">
	  <use xlink:href="#icon-daosanjiao"></use>
	</svg>

css

.icon{
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

（2）在线链接使用

复制如上两图所示的代码，在本地使用的基础上，将引入的js和css替换成下方这样子即可：

（在线链接的好处是，不用像本地使用那样在每次往图标库添加图标后就要下载一次）