Ralph Ralph - 3 years ago 95
CSS Question

Aligning font awesome icons beside text

How do I align the icons with a clean look? My code is pasted below. and look like this but i want it to look like
this

I tried to put it in table then align left with each td but the icons are moved down. Any possible way? thanks

<p class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</p>
<p class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</p>
<p class="for-font-size"><span class="fa fa-venus-mars"></span> Male</p>
<p class="for-font-size"><span class="fa fa-envelope"></span> sample-email@gmail.com</p>
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Answer Source

You can use the Font Awesome class fa-fw so each icon has the same width.

http://fontawesome.io/examples/#fixed-width

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p class="for-font-size"><span class="fa fa-calendar fa-fw"></span> July 25, 2017</p>
<p class="for-font-size"><span class="fa fa-map-marker fa-fw"></span> Sample City</p>
<p class="for-font-size"><span class="fa fa-venus-mars fa-fw"></span> Male</p>
<p class="for-font-size"><span class="fa fa-envelope fa-fw"></span> sample-email@gmail.com</p>
<p class="for-font-size"><span class="fa fa-phone fa-fw"></span> +12 34567890</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download