升级到 FontAwesome 5 后,我无法为 FontAwesome 的 svg 着色。
这是我的例子:
⠀⠀⠀⠀⠀
https://codepen.io/shadrix/pen/GygdZr
如果它像这里一样工作应该很棒:⠀⠀⠀⠀⠀
https://codepen.io/immad-hamid/pen/jVNvQO (注意:他使用的是 FontAwesome 4)。
最佳答案
图标不再作为字体中的字形引用,而是作为内联 SVG 注入(inject)。图标的内容颜色定义为 fill="currentColor"
。
设置背景和使用 -webkit-background-clip
的技术不再有效。相反,您可以直接设置 color
属性。不幸的是,这就是您遇到麻烦的地方,因为 color
不支持渐变。如果您使用 SVG 渐变定义,则可以改为设置 fill
:
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"
将具有更高的特异性。
关于css - FontAwesome 5 的 Instagram SVG 上的渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48809183/