CODEWITHSUNDEEP
htmlcssfont-awesome
Ralph
Ralph

Reputation: 195

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> [email protected]</p>
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Upvotes: 3

Views: 11084

Answers (5)

Shiva127
Shiva127

Reputation: 2633

You can use the Font Awesome Fixed Width Icons (fa-fw) or List Icons (fa-ul + fa-li).

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

<p><u><code>fa-fw</code> class</u></p>
<p><span class="fa fa-calendar fa-fw"></span> July 25, 2017</p>
<p><span class="fa fa-map-marker fa-fw"></span> Sample City</p>
<p><span class="fa fa-venus-mars fa-fw"></span> Male</p>
<p><span class="fa fa-envelope fa-fw"></span> [email protected]</p>
<p><span class="fa fa-phone fa-fw"></span> +12 34567890</p>

<p><u><code>fa-ul</code> + <code>fa-li</code> class</u></p>
<ul class="fa-ul">
  <li><span class="fa fa-calendar fa-li"></span> July 25, 2017</li>
  <li><span class="fa fa-map-marker fa-li"></span> Sample City</li>
  <li><span class="fa fa-venus-mars fa-li"></span> Male</li>
  <li><span class="fa fa-envelope fa-li"></span> [email protected]</li>
  <li><span class="fa fa-phone fa-li"></span> +12 34567890</li>
</ul>

Upvotes: 5

Alexandr
Alexandr

Reputation: 1031

So mean people, why so many downvote...

.fa {
  min-width:20px;
  text-align:center;
}

Upvotes: -1

Marcogomesr
Marcogomesr

Reputation: 2672

adding style to your span tag will fix it

span {
 width: 10px;
 padding-right: 15px;
}
<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"></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> [email protected]</p>
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Upvotes: 1

Dhaval Panchal
Dhaval Panchal

Reputation: 648

Add this

.for-font-size .fa {
    width: 15px; (arrording to font-size)
}

Upvotes: 0

John
John

Reputation: 323

Use the <ul> and <li> tags, something like this,

<ul>
<li class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</li>
<li class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</li>
<li class="for-font-size"><span class="fa fa-venus-mars"></span> Male</li>
<li class="for-font-size"><span class="fa fa-envelope"></span> [email protected]</li>
<li class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</li>
</ul>

You can also remove the class="for-font-size" if not required.

Upvotes: 0

Related Questions