[英]How to add a gradient color to an icon with no border
I would like to make a like icon and I would like to entierely fill an icon with gradient color in hover with no border only the heart shape.我想制作一个类似的图标,我想在 hover 中完全填充一个渐变颜色的图标,没有边框,只有心形。 i use fontawesome.我用的是fontawesome。
html: html:
<i class="far fa-heart"></i>
sass: sass:
i{
position: absolute;
left: 70vmin;
top:2vmin;
font-size: 1.6em;
z-index: 100;
cursor: pointer;
font-weight: 100;
&:hover{
transition: all .8s ease-in-out;
-webkit-background-clip: text;
font-weight: 900;
background-image: linear-gradient($color-primary, $color-secondary);
-webkit-text-fill-color: transparent;
}
I saw a lot of people who use background-clip and text-fill-color but the icon disapear only.我看到很多人使用背景剪辑和文本填充颜色,但图标只消失了。
Is there any solution?有什么解决办法吗?
Thanks谢谢
You can achieve like it:你可以像这样实现:
i{ position: absolute; left: 70vmin; top:2vmin; font-size: 1.6em; z-index: 100; cursor: pointer; font-weight: 100; } i:hover:before{ transition: all.8s ease-in-out; -webkit-background-clip: text; font-weight: 900; background-image: linear-gradient(red, yellow); -webkit-text-fill-color: transparent; }
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <i class="far fa-heart"></i>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.