FontAwesome 5 的 Instagram SVG 上的渐变答案

【问题标题】：Gradient over Instagram SVG of FontAwesome 5FontAwesome 5 的 Instagram SVG 上的渐变
【发布时间】：2018-05-27 18:55:35
【问题描述】：

升级到 FontAwesome 5 后，我无法为 FontAwesome 的 svg 着色。

这是我的例子： ⠀⠀⠀⠀⠀https://codepen.io/shadrix/pen/GygdZr

如果它像这里一样工作应该很棒：⠀⠀⠀⠀⠀https://codepen.io/immad-hamid/pen/jVNvQO（注意：他使用了 FontAwesome 4）。

【问题讨论】：

参考github.com/FortAwesome/Font-Awesome/issues/11925。

标签： css svg gradient font-awesome-5

【解决方案1】：

图标不再作为字体中的字形引用，而是作为内联 SVG 注入。图标的内容颜色定义为fill="currentColor"。

设置背景和使用-webkit-background-clip 的技术不再有效。相反，您可以直接设置 color 属性。不幸的是，这就是你遇到麻烦的地方，因为color 不支持渐变。如果您使用 SVG 渐变定义，则可以改为设置 fill：

body{
  background: black;
}
div {
  display:flex;
  justify-content:center;
  font-size:50px;
  color: white;
}

div:hover svg * {
  fill: url(#rg);
}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<svg width="0" height="0">
  <radialGradient id="rg" r="150%" cx="30%" cy="107%">
    <stop stop-color="#fdf497" offset="0" />
    <stop stop-color="#fdf497" offset="0.05" />
    <stop stop-color="#fd5949" offset="0.45" />
    <stop stop-color="#d6249f" offset="0.6" />
    <stop stop-color="#285AEB" offset="0.9" />
  </radialGradient>
</svg>
<div>
<i class="fab fa-instagram" aria-hidden="true"></i>
</div>

渐变的 r 属性不能用与 CSS 中相同的术语表示，所以这里有点估计。

注意选择器div:hover svg *。这样，它会覆盖元素上的属性。它需要直接引用styled元素，如果继承那个style，fill="currentColor"会有更高的特异性。

【讨论】：

哇，你太棒了！谢谢！
嗨@ccprog，这个答案来自一年前，但我在使用过渡时遇到了问题。当我悬停时，如何慢慢过渡这种效果，而不是立即发生？
@ccprog 请忽略最后一条评论。我在这里找到了答案：stackoverflow.com/questions/20012240/…
这可以在多个图标上完成但保持渐变一致吗？
@Larm 是的，只需将带有渐变定义的 svg 移动到父级

【解决方案2】：

我能够按照answer 提出解决方案使其工作。关键是在 FontAwesome 中使用mask feature。比如VueJs中的instagram图标，我们可以使用下面的代码：

<font-awesome-icon :icon="['fab', 'instagram-square']" :class="icon" :mask="['fas', 'square-full']" />

.icon {
    color: white;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

所有功劳归于相关评论的用户 sylvainDNS。

【讨论】：

【解决方案3】：

这样使用

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

【讨论】：