iconfont的使用笔记

iconfont的使用

1. 选择图标加购至项目

2. 点击生成代码

3. 引用方法一：html引用网络地址

复制两处代码

在html中粘贴代码，注意要在前面加上http:

3.引用方法二：直接复制css内容

点击红框

全选复制

粘贴在本地的css文件中，建议单独建一个iconfont.css只存放这个。记得在html中引用该css文件

3.引用方法三：将图标包下载至本地

点击下载

解压后放在项目中，记得在html中引用iconfont.css文件

彩色图标

若想使用彩色图标，需在项目设置处将字体格式彩色勾上，然后更新代码即可

设置iconfont图标渐变色 / 文字渐变色

// 设置背景渐变
background: linear-gradient(角度,颜色1,颜色2);

// 设置文字渐变
background: linear-gradient(角度,颜色1,颜色2);
-webkit-background-clip: text;			// 绘制区域为文字
-webkit-text-fill-color: transparent;   // 给文字填充颜色