如何使用阿里巴巴矢量图标

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

简单使用

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

image-20210907152359548.png

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

image-20210907152442595.png

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

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

大批量使用

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

image-20210907193148732.png

然后进入“我的项目”，

image.png

（1）本地使用

点击“下载至本地”按钮

image.png

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

image.png

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

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

<1>方式一Unicode

image.png

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



立即出效果：

image.png

<2>方式二Font class

image.png

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

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

image.png

<3>方式三Symbol

image.png

在标签底部引入js文件

html

css

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

（2）在线链接使用

image.png

image.png

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

image.png

image.png

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

6633d79fd65dfc2271782321bbfaffad.gif