JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <ul class="nav">
    <li class="fa fa-home"><a href="#">Home</a></li>
    <li class="fa-gears"><a href="#">Gears</a></li>
    <li class="fa-copy"><a href="#">Copy</a></li>
  </ul>

CSS

.nav > li.fa:before, .nav > li[class^="fa-"]:before {
	display: none;
}
.nav > li.fa > a:before, .nav > li[class^="fa-"] >a:before {
	display: inline-block;
	font-family: FontAwesome;
	line-height:  1;
	font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
}
.nav > li.fa-home > a:before {
	content: "\f015";
}

.nav > li.fa-gears > a:before {
	content: "\f085";
}

.nav > li.fa-copy > a:before {
	content: "\f0c5";
}