字体icon
是一种比CSS雪碧图技术更优雅的图标应用方式，比如说：Font Awesome、IcoMoon、Iconfont等。
优点：
- 图标矢量化，再也不用担心会在2倍屏、3倍屏下失真了；
- 本质上是字体，所以可以用CSS来灵活控制图标的大小、颜色、阴影等；
- 各大平台图标丰富，可方便找到自己需要的，如果有定制需求，可快速上传;
- 文件，转换为字体图标，优化页面加载。
缺点：
多色图标的支持还不完善。
使用：
常用网站：Iconfont
第一步：进入Iconfont官网，搜索、选择合适的图标
① 可点击下载文件生成图标：如下↓
② 也可添加至我的项目中，点击下载到本地，也可以直接使用在线链接；↓
选择加入购物
进入购物车：
添加入你的项目：
下载到本地得到一个包文件：（下载的文件中，以下三个文件分别介绍了unicode、font-class、symbol三种方式的使用）
解压缩，放入项目文件：
（解压缩打开：）
渐变色图标
Unicode和font-class方式支持，建议使用font-class方式。
利用css3背景色的渐变来实现。
核心思想：
1. background: linear-gradient(to bottom, #fb2c61 0%, #fac362 100%); //通过CSS3实现背景色渐变效果2. -webkit-background-clip: text; //规定背景的绘制区域为文字部分3. -webkit-text-fill-color: transparent; //文字填充颜色 一定要定义为transparent 否则会覆盖底部的背景色-webkit-前缀，Chrome和Safari、新版firefox能够正常使用,如果有兼容性需求,需谨慎使用。之前接触过的background-clip有下面几种取值：
background-clip: border-box（默认）｜padding-box｜content-box; // 背景被裁剪到边框盒 | 背景被裁剪到内边距框｜背景被裁剪到内容框。
