最开始网页中的小图标，多以img形式展示 ，当有大量的小图标时，会制作雪碧图，来减少请求量；类似这种~
很繁琐，当有hover效果，还要更换图片。字体图标用的就方便多了。
所谓的字体图标，是以font形式展示在页面中，可用color属性控制颜色。我自己用的是阿里图标库。
第一步：搜索想要的图标，比如我输入‘日期’，将合适的图标添加到购物车中。
第二步：将选择好的图标添加至项目中，没有项目可新建
第三步：下载并引用图标代码
第二步点‘确定’按钮后，会自动跳到这个页面中。调用方式分在线调用和本地调用两种，在线调用只要把生成的css链接直接引用到页面即可；本地调用需要下载至本地，该方式下也有三种显示方法，我用的是Font class 形式，然后点击‘下载至本地’
解压后的文件中，选择这5个文件到我们的项目中，在页面中引用iconfont.css文件
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="iconfont/iconfont.css"></head><body><i class="iconfont icon-date"></i><i class="iconfont icon-30"></i></body></html>
好了，图标显示成功
如果有hover效果，直接修改color，font-size，font-weight等属性，移上去的效果如下
.icon-date:hover{font-size: 40px;color: green;}
