如何在悬停时填充带有背景的字体图标？ [复制]

Question

我正在尝试用线性渐变填充一个 fontawesome 图标，当悬停时

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

有

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

我显然得到了一个 squared background ；我只想要图标内的背景。

我尝试了不同的方法但没有成功，所以在开始处理 SVG 之前，我想知道是否有使用 CSS 的解决方案

Answer 1

我们可以使用 css 为我们的字体图标赋予任何颜色

<button class="vignet_like">
    <i class="fas fa-heart text-green"></i>
</button>

CSS

.text-green{
    color: green;
}
.text-red{
    color: red;
}