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

Question

我想做一个喜欢的图标，我想在悬停时用渐变颜色填充图标，没有边框，只有心形。我用的是fontawesome。

html:

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

萨斯：

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

我看到很多人使用 background-clip 和 text-fill-color 但图标只消失了。

有什么解决办法吗？

谢谢

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>