Instagram的SVG of FontAwesome 5的渐变

Question

升级到FontAwesome 5后,我无法为FontAwesome的svgs着色.

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

如果它像这里一样工作应该很棒:????? https ://codepen.io/immad-hamid/pen/jVNvQO(注意:他使用FontAwesome 4).

Answer 1

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

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

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 *.有了它,它会覆盖元素上的属性.它需要直接引用样式元素,如果继承该样式,则fill="currentColor"具有更高的特异性.