32

我刚刚发现字体很棒，我想在我的网站上使用它。

问题是，我希望我的字体用渐变着色。我发现此代码适用于标准文本，但无法使用 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”，我想要的图标，然后什么都没有......

有人知道吗？

谢谢

4

2 回答 2

39

快速尝试一下；要意识到的重要一点是 Font Awesome 通过'before' 伪元素添加了实际图标：

[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

.icon-beaker:before {
  content: "\f0c3";
}

要将渐变效果应用于图标，您必须定位包含图标的伪元素 - 请参阅此 jsFiddle以获取基于您的代码的工作演示：

.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 */
}​

编辑：上面链接的 jsFiddle 不再按预期工作，因为包含“FontAwesome”图标的链接 CSS 文件已移动；使用bootstrapcdn.com 托管的 FontAwesome v4.0.3 版本和更新的 FontAwesome-icon CSS 类名称的工作版本可在http://jsfiddle.net/HGxMu/55/获得

于 2012-10-05T23:19:06.620 回答
38

直接在图标上应用样式。

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

于 2017-01-02T23:26:42.937 回答