1.登录阿里巴巴矢量图标库
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具/
首页：
2.从中选择你喜欢的图标库
3. 点击加入购物车，在购物车中可以查看自己想要的图标
4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字
5.直接点击下载至本地，下载完成后解压缩(最好将该文件夹重命名一下，写代码的时候比较好用，我这里重命名为word)并将文件夹放入vscode中你要使用的文件夹下。
可以看到iconfont.css，这是我们需要引入的css
并且右键demo_index.html在浏览器中打开
特别提醒：在web端使用字体图标部分图标可能出现错误，一般使用Fontclass方式是最简单的，也是官方推荐的，图一三种引入方式全部支持，图二只支持Symbol方式，其他引用方式会出现图标变黑，根据实际需求变换引入方式。
Symbol方式没错，彩色图标
Font class出错，图标变成黑色
使用link标签引入<link rel="stylesheet" href="word/iconfont.css">
6.(1)建议使用Font class方式引入方便，这里第一种先展示Font class方法。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="download/test_font/iconfont.css" /><style>span.icon-buganxingqu {font-size: 100px;color: red;}span.icon-dingwei {font-size: 100px;color: blue;}span.icon-caidan {font-size: 100px;color: greenyellow;}</style></head><body><span class="iconfont icon-buganxingqu">爱心图标</span><br /><span class="iconfont icon-dingwei">定位图标</span><br /><span class="iconfont icon-caidan">egg</span><br /><span class="iconfont icon-ditu"></span><br /><span class="iconfont icon-bofangjilu"></span></body></html>
此时图标就相当于文本，可以设置大小font-size，还可以设置颜色
可以看到和文字一样
6.(2)使用Symbol引入比较麻烦不建议使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="test/iconfont.css" /><style>.icon {width: 100px;height: 100px;}</style></head><body><script src="test/iconfont.js"></script><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liuyanban"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zijin"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangcheng"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-anquan"></use></svg></body></html>
