#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）

iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）

前言

相信大家在前端开发过程中，需要使用各种奇奇怪怪的小图，可是我们不能总是截别人的图copy吧，我们要做一个优雅的程序员，所以我们可以插入矢量图。

我从各种渠道(b站、csdn)学习到了3种常用的方法,可以插入矢量图。

开始前的准备

你需要登录iconfont-阿里巴巴矢量图标库

首先你必须申请注册一个账号，目前你可以使用Git-hub账号、或者微博账号、或者手机号来注册，阿里矢量图需要登录才能进行操作。

开始

1、我们来到iconfont网站首页，搜索一个我们想要的矢量图，如："小狗"或"dog"(这里即可以输入中文也可以输入英文查找，这里称赞一下阿里，非常人性化，毕竟有些图标用英文更好查找)；

 2、我们这里输入关键词“狗”，出来一大堆矢量图，我们选中第三个，然后点击蓝色圈里的“红色购物车图标”的按钮；

3、 接2步骤，点击“红色购物车图标”后，如图该图标会变成一个满满的红色购物车状态的按钮，紧接着我们再点击网页导航栏右上角的白色购物车按钮，如红色箭头所示；

4、 如下图，页面变成如下的样式，(注：这里哥们提醒你们，最好将一个项目所需要的所有矢量图标，一次性全部选进“红色购物车”里，后面会省很多事情)，这里假设我们要开发一个十二生肖的某网页，我们选了十二生肖的图标，全部选进购物车后，如