字体icon渐变色

字体icon

是一种比CSS雪碧图技术更优雅的图标应用方式，比如说：Font Awesome、IcoMoon、Iconfont等。

优点：

1. 图标矢量化，再也不用担心会在2倍屏、3倍屏下失真了；
2. 本质上是字体，所以可以用CSS来灵活控制图标的大小、颜色、阴影等；
3. 各大平台图标丰富，可方便找到自己需要的，如果有定制需求，可快速上传;
4. 文件，转换为字体图标，优化页面加载。

缺点：
多色图标的支持还不完善。

使用：

常用网站：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;  // 背景被裁剪到边框盒 | 背景被裁剪到内边距框｜背景被裁剪到内容框。