一、去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下的值
