JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<span class="big-icon">
    Hello world
</span>

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

<span class="big-icon">
    <i class="fa fa-flask big-icon"></i>
</span>

<i class="fa fa-flask big-icon"></i>

<hr>

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

<hr>

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

CSS

body {
    padding: 80px;
    background: #f6f6f6;
    font-family: sans-serif;
}

.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;
}