FontAwesome 5在Instagram SVG上的渐变 [英] Gradient over Instagram SVG of FontAwesome 5

问题描述

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

After upgrading to FontAwesome 5, I'm not able to color the svgs of FontAwesome.

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

如果它像这里一样工作，那就太棒了:⠀⠀⠀⠀⠀ https://codepen.io/immad-hamid/pen/jVNvQO (注意:他使用的是FontAwesome 4).

Should be awesome if it worked like here: ⠀⠀⠀⠀⠀ https://codepen.io/immad-hamid/pen/jVNvQO (Note: he used FontAwesome 4).

推荐答案

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

Icons are no longer referenced as glyphs from a font, but injected as inline SVG. The content color of the icon is defined as fill="currentColor".

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

The technique with setting the background and using -webkit-background-clip no longer works. Instead you can set the color property directly. Unfortunately, that is where you get into a bit of trouble because color does not support gradients. You can set fill instead, if you use a SVG gradient definition:

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中相同的术语表示，因此这里有些估算.

THe r attribute for the gradient cannot be expressed in the same terms as in CSS, so it's a bit of an estimate here.

注意选择器div:hover svg *.这样，它将覆盖元素上的属性.它需要直接引用样式元素，如果继承该样式，fill="currentColor"具有更高的特异性.

Note the selector div:hover svg *. with that, it overwrites the attribute on the element. It needs to reference the styled element directly, if inheriting that style, fill="currentColor" would have the higher specificity.

这篇关于FontAwesome 5在Instagram SVG上的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！