Html 字体渐变

我刚刚发现，我想在我的网站上使用它

问题是，我想我的字体颜色渐变。 我发现它适用于标准文本，但我无法使它适用于字体中的图标

以下是我测试的内容：

<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>

.大图标{
字体大小：72px；
背景：-webkit渐变（线性、左上、左下、从（#eee）到（#333））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
你好，世界

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

有人知道吗

---

谢谢

给了我一个快速的机会；需要了解的重要一点是，Font Awesome通过以下方式添加实际图标：

要将渐变效果应用于图标，必须以包含图标的伪元素为目标–请参阅，以获取基于代码的工作演示：

.big-icon:before {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial; /* reset Font Awesome's display:inline-block */
}​

---

---

编辑：上面链接的JSFIDLE不再像预期的那样工作，因为包含“FontAwesome”图标的链接CSS文件已移动；使用FontAwesome v4.0.3版本和更新的FontAwesome图标CSS类名的工作版本可从

直接在图标上应用样式

.fa梯度{
背景：-webkit渐变（线性、左上、左下、从（#f00）到（#333））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

您的字体链接不起作用。对于我们这些还不熟悉它的人来说，很难提供帮助。为什么class=“big icon”有两个跨距？它不会在一个跨度内全部工作吗？它是为了测试目的。首先，我只测试文本渐变，然后测试字体，然后两者一起测试。

.big-icon:before {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial; /* reset Font Awesome's display:inline-block */
}​