title: Text gradient with font awesome
body: <p>I just discovered <a href="http://fortawesome.github.com/Font-Awesome/">font awesome</a> and I want to use it in my website.</p>
  
  <p>The problem is, I want my font to be colored with a gradient.
  I found <a href="http://css-tricks.com/snippets/css/gradient-text/">this code</a> that works on standard text, but I can't make it work with a icon from Font Awesome</p>
  
  <p>Here is what I tested:</p>
  
  <pre><code>&lt;style&gt;
      .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;
      }
  &lt;/style&gt;
  
  &lt;span class="big-icon"&gt;
      Hello world
  &lt;/span&gt;
  &lt;i class="icon-beaker"&gt;&lt;/i&gt;
  &lt;span class="big-icon"&gt;
      &lt;i class="icon-beaker"&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>And it displayed a "Hello world" with a gradient, the icon I want and then nothing...</p>
  
  <p>Anyone have any idea ?</p>
  
  <p>Thanks</p>