How to add a gradient color to an icon with no border

Question

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. i use fontawesome.

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

I saw a lot of people who use background-clip and text-fill-color but the icon disapear only.

Is there any solution?

Thanks

Answer 1

You can achieve it like this:

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>