JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/site.css">
<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<span class="big-icon">
    Hello world
</span>

<i class="icon-beaker"></i>

<span class="big-icon">
    <i class="icon-beaker big-icon"></i>
</span>

<i class="icon-beaker big-icon"></i>

<hr>

<h1 class="icon-gradient">
    <i class="icon-beaker icon-gradient"></i> A headline with an inline-icon
</h1>

<hr>

<h2><i class="icon-hand-up icon-gradient"></i> Another headline</h2>

CSS

body {
    padding: 80px;
    background: #f6f6f6;
}

.big-icon,
.big-icon:before {
    font-size: 72px;
    background: -webkit-gradient(linear, left top, left bottom, from(#0c8), to(#333));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial; /* reset Font Awesome's display:inline-block */
}

.icon-gradient:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}