Html 文字渐变，字体真棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12732663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text gradient with font awesome
提问by Gael Du Plessix
I just discovered font awesomeand I want to use it in my website.
我刚刚发现字体很棒，我想在我的网站中使用它。
The problem is, I want my font to be colored with a gradient. I found this codethat works on standard text, but I can't make it work with a icon from Font Awesome
问题是，我希望我的字体具有渐变色。我发现这段代码适用于标准文本，但我无法使其与 Font Awesome 中的图标一起使用
Here is what I tested:
这是我测试的：
<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>
And it displayed a "Hello world" with a gradient, the icon I want and then nothing...
它显示了一个带有渐变的“Hello world”，我想要的图标，然后什么都没有......
Anyone have any idea ?
任何人有任何想法？
Thanks
谢谢
回答by fk_
Gave this a quick shot; the important thing to realize is that Font Awesome adds the actual icons via the 'before' pseudo-element:
快速尝试一下；要意识到的重要一点是 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";
}
To apply the gradient-effect to the icon, you have to target the pseudo-element which contains the icon – see this jsFiddlefor a working demonstration based upon your code:
要将渐变效果应用于图标，您必须定位包含图标的伪元素 – 请参阅此 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 */
}?
Edit:The jsFiddle linked above does not work as expected anymore because the linked CSS-file that contains the "FontAwesome"-icons has moved; a working version using the bootstrapcdn.com-hostedversion of FontAwesome v4.0.3 and updated FontAwesome-icon CSS class names is available at http://jsfiddle.net/HGxMu/55/
编辑：上面链接的 jsFiddle 不再按预期工作，因为包含“FontAwesome”图标的链接 CSS 文件已移动；使用bootstrapcdn.com 托管版本的 FontAwesome v4.0.3 和更新的 FontAwesome-icon CSS 类名称的工作版本可在http://jsfiddle.net/HGxMu/55/ 获得
回答by Nathalia Xavier
Apply the styles directly on the icon.
直接在图标上应用样式。
.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>