title: Aligning font awesome icons beside text
body: <p>How do I align the icons with a clean look? My code is pasted below. and look like <a href="https://i.stack.imgur.com/IOGiY.jpg" rel="nofollow noreferrer">this</a> but i want it to look like 
  <a href="https://i.stack.imgur.com/ob68Z.jpg" rel="nofollow noreferrer">this</a></p>
  
  <p>I tried to put it in table then align left with each td but the icons are moved down. Any possible way? thanks</p>
  
  <pre><code>&lt;p class="for-font-size"&gt;&lt;span class="fa fa-calendar"&gt;&lt;/span&gt; July 25, 2017&lt;/p&gt;
  &lt;p class="for-font-size"&gt;&lt;span class="fa fa-map-marker"&gt;&lt;/span&gt; Sample City&lt;/p&gt;
  &lt;p class="for-font-size"&gt;&lt;span class="fa fa-venus-mars"&gt;&lt;/span&gt; Male&lt;/p&gt;
  &lt;p class="for-font-size"&gt;&lt;span class="fa fa-envelope"&gt;&lt;/span&gt; sample-email@gmail.com&lt;/p&gt;
  &lt;p class="for-font-size"&gt;&lt;span class="fa fa-phone"&gt;&lt;/span&gt; +12 34567890&lt;/p&gt;
  </code></pre>