如何在 hover 上填充带有背景的 fontawesome 图标？ [复制]

Question

这个问题在这里已经有了答案：

渐变文本颜色7 个答案

7 个月前关闭。

悬停时，我正在尝试用线性渐变填充字体

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

和

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

我显然有一个平方的背景； 我只想要图标内的背景。

我尝试了不同的方法但没有成功，所以在开始使用 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;
}