一、去iconfont矢量图库下载素材
1、挑选素材
把自己想要的素材点击 添加购物车；
2、添加至项目
然后点击购物车，添加至项目，选择需要加入的项目里；
3、下载
选择unicode下载至本地
下载后是个压缩包，然后解压；
4、添加至项目
将文件复制到你的项目文件夹中
5、打开demo_index.html
Unicode 和 Font class都是黑白图标，所以我们点击Symbol，这个网页上都有教程教我们怎么使用
二、页面引入
我将按照以上步骤操作一番，
代码展示：
<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="./京东侧边栏.css">
<!-- 彩色标签：第一步，引入iconfont.js -->
<script src="./image/图标/iconfont.js"></script>
<!-- 彩色标签：第二部，引入demo.css -->
<link rel="stylesheet" href="./image/图标/demo.css">
<style>
/* 彩色标签：第三部，修改标签大小等属性，这个可选 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<li>
<a href="#">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-meishi1"></use>
</svg>
<span>美食</span>
<i class="iconfont"></i>
</a>
</li>
展示效果：
三、注意
#icon-meishi1在demo_index.html里复制对应图标Symbol下的值
