FontAwesome 5在Instagram SVG上的渐变

问题描述

图标不再从字体中引用为字形,而是作为嵌入式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"则将具有更高的特异性。

解决方法

升级到FontAwesome 5后,我无法为FontAwesome的svg上色。

如果它像这里一样工作,应该很棒:(注意:他使用了FontAwesome 4)。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...