JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<ul class="main-nav" role="menu">
<li role="none"><a role="menuitem" href="#">Link 1</a></li>
<li role="none"><a role="menuitem" href="#">Link 2</a></li>
<li role="none"><a role="menuitem" href="#">Link 3</a></li>
<li role="none"><a role="menuitem" href="#">Link 4</a></li>
</ul>

CSS

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li::before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

li:nth-child(1)::before {
  content: "\f00c"; /* FontAwesome Unicode */
}

li:nth-child(2)::before {
  content: "\f053"; /* FontAwesome Unicode */
}

li:nth-child(3)::before {
  content: "\f078"; /* FontAwesome Unicode */
}

li:nth-child(4)::before {
  content: "\f13a"; /* FontAwesome Unicode */
}