iconfont-阿里巴巴矢量图的使用方法（保姆级教学，挑战全网最细致的使用矢量图）
前言
相信大家在前端开发过程中，需要使用各种奇奇怪怪的小图，可是我们不能总是截别人的图copy吧，我们要做一个优雅的程序员，所以我们可以插入矢量图。
我从各种渠道(b站、csdn)学习到了3种常用的方法,可以插入矢量图。
开始前的准备
你需要登录iconfont-阿里巴巴矢量图标库
首先你必须申请注册一个账号，目前你可以使用Git-hub账号、或者微博账号、或者手机号来注册，阿里矢量图需要登录才能进行操作。
开始
1、我们来到iconfont网站首页，搜索一个我们想要的矢量图，如："小狗"或"dog"(这里即可以输入中文也可以输入英文查找，这里称赞一下阿里，非常人性化，毕竟有些图标用英文更好查找)；
2、我们这里输入关键词“狗”，出来一大堆矢量图，我们选中第三个，然后点击蓝色圈里的“红色购物车图标”的按钮；
3、 接2步骤，点击“红色购物车图标”后，如图该图标会变成一个满满的红色购物车状态的按钮，紧接着我们再点击网页导航栏右上角的白色购物车按钮，如红色箭头所示；
4、 如下图，页面变成如下的样式，(注：这里哥们提醒你们，最好将一个项目所需要的所有矢量图标，一次性全部选进“红色购物车”里，后面会省很多事情)，这里假设我们要开发一个十二生肖的某网页，我们选了十二生肖的图标，全部选进购物车后，如图所示，我们再点击右下角的“添加至项目”按钮。
5、然后界面会变成如下图的样子，(这里请忽略我已经创建过的名称为"myicon"的项目)，哥们假设我第一次来这个页面；
6、来，我们点击右下角红色方框内标记的按钮。
7、点击过之后 ，我们重新创建一个名为“shengxiao”的项目，之所以用英文字母命名，是因为一个优雅的程序员习惯用英文字母，(傲娇)。
8、点击“确定”按钮之后，我们来到如下图界面，从这里开始我们就有三种方法插入矢量图了，
分别是unicode 引用、font-class 引用、symbol 引用。
9、 不管哪种方法，都不影响我们下载至电脑，我们点击“下载至本地”按钮，是一个压缩包，下载完之后，需要先解压成正常的文件夹。(别急着关掉这个页面，我们让网页最小化，一会儿再用)。
10、解压后的文件夹打开应该是具有这些文件的，如图所示。
方案一、 unicode 引用。
1、首先我们进入VScode或者你自己的其他编译器，创建一个"shengxiao01"的html文件，这里题目自定，无所谓，为了方便区分，这里title标签写上"<title>引用unicode</title>"。
2、接着我们引入刚才解压的文件夹，(记住是文件夹，直接拉到“shengxiao01”文件夹下，即你要开发项目的文件夹下，引入的文件夹，自带的名字都挺长的，这里我们为了方便区别，给这个文件夹重命名为“font”)。
3、我们写一个link,如图，引入的文件为font文件夹中的iconfont.css文件。(注意：这个font文件是咱们前面步骤9、10下载的那个压缩文件解压后的，只不过换了个名字，别晕了)
4、我们再回到阿里矢量图刚才操作到的界面，(你不会关掉阿里矢量图页面了吧？如果关掉了，你再重新开一下，在“我的项目”里找到你已经收入购物车的图标)，保证此时选中的是Unicode按钮，选中显示为橙红色的状态。
5、复制如图这个牧羊座矢量图标的unicode代码，你把鼠标光标放到矢量图上就会出现，如图操作。
6、带着这个复制的unicode代码，我们回到vscode操作界面，如图提示操作。
7、 运行后的成功图。
8、哥们的额外发现，i 、span、p标签都可以包这个unicode编码代码。
如图运行后
方案二、 Fontclass引用。
(注意：这里方法改动不大，唯一的区别是类名、编码的不同，操作是一样的。)
为了方便大家不混乱，我们重新建一个文件叫做shengxiao02,写font class引用方法。
1、 仿照方案一的步骤。
2、操作过步骤1再回到阿里矢量图界面，我们按照如下操作。
3、复制结束，该粘贴了吧，但是注意这次不是粘贴进标签中间了。
4、我们来看看效果 ：
方案三、 Font class引用。
第三种方法链接的是JS文件，
1、打开你之前从阿里巴巴矢量图官网下载的文件，我们点击在之前下载的那个文件夹，没错重命名过的“font”文件夹，点击蓝色框选中的文件。
2、来到如下界面：如图提示操作
3、翻到下面，如图操作。
4、接着我们回到vscode，如图操作。
5、 然后选择Symbol代码，对应的图标代码。
6、复制粘贴这个symbol代码过后，如图：
7、运行如图效果：
恭喜你，你已经学会了三种向html文件中引入矢量图的方法。给自己买个鸡腿吧
#今日说码栏目#第十五集 iconfont-阿里巴巴矢量图的使用方法（保姆级教学 挑战全网最细致的使用矢量图）
