title: how to put text and font awesome in a line with a proper way?
body: <p>I just wants to display a font awesome icon and text in a line:</p>
  
  <pre><code>&lt;th&gt;
   &lt;span&gt;
    &lt;a&gt;
     &lt;i style="color:green;font-size:22px;" class="fa fa-plus-circle" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/a&gt;
   &lt;/span&gt;
   &lt;span&gt; Add Task&lt;/span&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>It's working but the problem is =>
  <a href="https://i.stack.imgur.com/aRcMs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aRcMs.png" alt="enter image description here"></a></p>
  
  <p>If you take a look at above pic then you can see the text is not on the middle of the icon. I tried to put some margin there but it's not working. Can anybody help me?</p>