本文使用symbol，其他使用方式可参考官网 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

第一步：引入项目下面生成的symbol代码： 记住前面需要加上http

第二步：加入通用css代码（引入一次就行）

第三步：挑选相应图标并获取类名，应用于页面：

或

实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

核心思想为下面 3 条属性值。 1、 设置渐变的背景 background: -webkit-linear-gradient(-45deg, #caff55 20%, #45cd00 60%); 2、规定背景的绘制区域为文字区域 -webkit-background-clip: text; 这个属性还有其他值： border-box (默认) 背景被剪裁到边框盒 padding-box 背景被剪裁到内边距框 content-box 背景被剪裁到内容框 3、文字填充颜色（这里一定要设置 transparent，不然会覆盖底部的背景色) -webkit-text-fill-color: transparent;

更详细内容请访问：https://www.jianshu.com/p/94a00d79a2af