Text gradient with font awesome

Question

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

Answer 1

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/