如何为没有边框的图标添加渐变颜色

Question

我想做一个类似的图标，我想完全填充一个图标渐变的颜色在悬停没有边界只有心形。我用fontaawesome

html:

<i class="far fa-heart"></i>

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

我看到很多人使用背景剪辑和文本填充颜色，但图标只是消失了。

有解决办法吗?

感谢

Answer 1

你可以做到:

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>