实现iconfont图标渐变

2024-04-29 13:20:23

效果展示

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>

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

实现iconfont图标渐变相关推荐

iconfont图标、平面转换、颜色渐变
一.iconfont图标使用步骤 1.打开阿里巴巴矢量图标库,查找自己需要的图标. 2.点击下载,添加至项目 3.两种方法:下载至本地.生成线上链接(注意在生成链接后前面添加http:) 4.下载至本 ...
Swift使用iconfont图标
iconfont怎么在iOS中使用了什么是iconfont? 简而言之就是将图标用文字(通过编码)字体的形式显示. 优点:减少项目体积包, 减少切2倍图和3倍图 , 各设备显示效果都不错, 可 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF 如何将IconFont图标转成Geometry
之前每次使用IconFont图标,都要去下载一个png图片,每次颜色什么的改了,都要重新下载,太苦逼了. 现在好了,终于找到如何方便快速地使用IconFont图标了. 是应该的演示如何从IconFon ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...

最新文章

热门文章