问题描述
图标不再从字体中引用为字形,而是作为嵌入式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)。