Font-awesome Gradient Icon

by Nathália Tuia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-wrench fa-gradient"></i>

CSS

.fa-gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 3em;
	display: block;
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
}