html - 字体很棒的文本渐变

Question

我刚刚发现 font awesome我想在我的网站上使用它。

问题是，我希望我的字体具有渐变色。我找到了 this code适用于标准文本，但我无法使用来自 Font Awesome 的图标

这是我测试过的:

<style>
    .big-icon {
        font-size: 72px;
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
</style>

<span class="big-icon">
    Hello world
</span>
<i class="icon-beaker"></i>
<span class="big-icon">
    <i class="icon-beaker"></i>
</span>

它显示了一个带有渐变的“Hello world”，我想要的图标然后什么都没有...

有人知道吗？

谢谢

Answer 1

直接在图标上应用样式。

.fa-gradient {
	background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-3x fa-wrench fa-gradient"></i>