FontAwesome 5在Instagram SVG上的渐变

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  aria-hidden="true"></i></div>

该

r

渐变属性不能在相同的条件，如CSS来表达，所以这是一个有点估计这里。

注意选择器

div:hover svg*

。这样，它将覆盖元素上的属性。它需要直接引用样式化元素，如果继承该样式，

fill="currentColor"

则将具有更高的特异性。