JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <h2>Initial position</h2>
      <ul class="icon-bottom">
        <li><a href="#"><i class="fa fa-home"></i>tab1</a></li>
        <li><a href="#"><i class="fa fa-beer"></i>tab2</a></li>
      </ul>

<br>
<h2>Outcome I wanted (I manually switched the position of fontawesome to the right.) </h2>
      <ul class="www">
        <li><a href="#">tab1<i class="fa fa-home"></i></a></li>
        <li><a href="#">tab2<i class="fa fa-beer"></i></a></li>
      </ul>

CSS

li { display:inline-block;border:1px solid #ddd }
li a { text-align:center;padding:10px 20px;display:block }


/*outcome I wanted */

li a .fa{ display:block }