文字渐变与字体真棒 [英] Text gradient with font awesome

问题描述

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

问题是，我希望我的字体用渐变着色。
我找到了这个代码，它可以在标准文本上工作，但我无法做到使用Font Awesome中的图标

以下是我测试的内容：

 <风格> 
 .big-icon {
 font-size：72px; 
 background：-webkit-gradient（线性，左上角，左下角，从（#eee）到（＃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，我想要的图标，然后什么都不显示。 。

任何人有任何想法？

谢谢

解决方案

给了这个快速射击;要实现的重要一点是Font Awesome通过'之前'伪元素添加实际图标：

  [class ^ =icon  - ] :: before，
 [class * =icon-] ::之前{
 font-family：FontAwesome; 
 font-weight：normal; 
 font-style：normal; 
 display：inline-block; 
 text-decoration：inherit; 
} 
 
 .icon-beaker：before {
 content：\f0c3; 
 
 
 
 $ b $ p 
 $ b 
为了将渐变效果应用于图标，您必须将伪 - 包含图标的元素 - 请参阅此jsFiddle ，以便根据您的代码进行工作演示：
  .big-icon：之前{
 font-size：72px; 
 background：-webkit-gradient（线性，左上，左下，从（＃f00）到（＃333））; 
 -webkit-background-clip：text; 
 -webkit-text-fill-color：transparent; 
 display：initial; / * reset Font Awesome的显示：inline-block * / 
} 
  
 
 
 
 
 
 
 编辑：上面链接的jsFiddle不再按预期工作，因为包含FontAwesome-icons的链接CSS文件已移动;一个使用FontAwesome v4.0.3的 bootstrapcdn.com托管的版本和更新的FontAwesome的工作版本-icon CSS类名称可在 http://jsfiddle.net/HGxMu/55/ 获取
 
I just discovered font awesome and I want to use it in my website.

The problem is, I want my font to be colored with a gradient.
I found this code that works on standard text, but I can't make it work with a icon from 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...

Anyone have any idea ?

Thanks
解决方案
Gave this a quick shot; the important thing to realize is that Font Awesome adds the actual icons via the 'before' pseudo-element:
[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 jsFiddle for a working demonstration based upon your code:
.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-hosted version of FontAwesome v4.0.3 and updated FontAwesome-icon CSS class names is available at http://jsfiddle.net/HGxMu/55/

                        
这篇关于文字渐变与字体真棒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！