0

I'm trying to fill a fontawesome icon with a linear gradient, when hovered

<button class="vignet_like">
    <i class="far fa-heart heart_icon"></i>
</button>

With

.heart_icon:hover { linear-gradient (95deg, lightgreen 0%, lightblue 100%); }

I obviously got a squared background ; I want the background only inside icon.

I tried different approachs with no succes, so before going to work on SVGs, i wanted to know if there is a solution using CSS

Bakura
  • 81
  • 2
  • 4
  • in this case you need to use different icon. On hover you need to load filed version of icon you are using – StefanP Jan 25 '21 at 17:10
  • Thanks for your answer @StefanP. Yes we can use color propery on icons. Unfortunatly we can't use linear gradient with it – Bakura Jan 25 '21 at 17:32

0 Answers0