Css 5的Instagram SVG上的渐变

升级到FontAwesome 5后，我无法为FontAwesome的SVG上色

这是我的例子：

⠀⠀⠀⠀⠀

如果它像这里那样工作，那就太棒了：
⠀⠀⠀⠀⠀（注意：他使用了FONT4）。
图标不再作为字体的标志符号引用，而是作为内联SVG注入。图标的内容颜色定义为
fill=“currentColor”

设置背景和使用
-webkit background clip
的技术不再有效。相反，您可以直接设置
color
属性。不幸的是，这会给您带来一些麻烦，因为
color
不支持渐变。如果使用SVG渐变定义，则可以设置
fill
：


正文{
背景：黑色；
}
div{
显示器：flex；
证明内容：中心；
字体大小：50px；
颜色：白色；
}
div:hover svg*{
填充：url（#rg）；
}

像这样使用

i.fab {
    background: linear-gradient(to right, #8490ff 0%, #62bdfc 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

请参考。哇，你太棒了！非常感谢。您好@ccprog，这是一年前的答案，但我在使用transition时遇到了问题。当我悬停时，我如何才能缓慢地转换此效果，而不是立即发生？@ccprog请忽略最后的评论。我在这里找到了答案：这可以在多个图标上完成，但要保持渐变一致吗？@Larm是的，只需将带有渐变定义的svg移到父级即可