实现iconfont图标渐变

效果展示

实现iconfont图标渐变_第1张图片

1.如何使用icon

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

第一步:引入项目下面生成的symbol代码:
实现iconfont图标渐变_第2张图片
记住前面需要加上http

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1038719_zknbsv10w2.css">

第二步:加入通用css代码(引入一次就行)


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

<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;

代码


<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>Documenttitle>
    <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>

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

你可能感兴趣的:(css)