效果展示
1.如何使用icon
本文使用symbol，其他使用方式可参考官网
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
第一步：引入项目下面生成的symbol代码：
记住前面需要加上http
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1038719_zknbsv10w2.css">
第二步：加入通用css代码（引入一次就行）
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步：挑选相应图标并获取类名，应用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
或
<i class="iconfont icon-huaduo" style="color:red;"></i>
实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
2.实现icon颜色渐变
核心思想为下面 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;
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1038719_zknbsv10w2.css">
<style type="text/css">
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon-huaduo{
font-size: 200px;
background-image: -webkit-linear-gradient(-45deg, #caff55 20%, #45cd00 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>
<h1>IconFont 图标</h1>
<i class="iconfont icon-huaduo"></i>
</div>
</body>
</html>
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
