您的位置: 首页  >  文章  >  实现iconfont图标渐变

实现iconfont图标渐变

分类: 文章 • 2024-02-15 19:26:17

效果展示

实现iconfont图标渐变

1.如何使用icon

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

第一步：引入项目下面生成的symbol代码：
实现iconfont图标渐变
记住前面需要加上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>

相关推荐