I added links in front of the icons, added indents to the icons in, but the links do not go exactly to the column. I guess because of the different size of the icons. How can I equalize them without using Space?

<h3>Contact</h3> <ul> <li><i class="fa fa-map-marker"></i> London, UK 441</li> <li><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</li> <li><i class="fa fa-envelope"></i>Email: info@example.com</li> <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a></li> <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a></li> <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a></li> <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a></li> </ul>

enter image description here

  • Set the icons to the same width - Yuri

3 answers 3

 ul { padding-left: 0; list-style: none; } ul>li { padding-left: 30px; position: relative; } ul>li i { position: absolute; top: 0; left: 0; width: 25px; /*text-align: center;*/ } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <h3>Contact</h3> <ul> <li><i class="fa fa-map-marker"></i> London, UK 441</li> <li><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</li> <li><i class="fa fa-envelope"></i>Email: info@example.com</li> <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a> </li> <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a> </li> <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a> </li> <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a> </li> </ul>

    The icons have different widths, so the indentations "dance", so that they do not dance, just indicate to them a specific width (maximum for the widest icon)

      I think you expect exactly this result:

       @import "https://cdnjs.cloudflare.com/ajax/libs/godlike.css/3.3.7/godlike.min.css"; ul>li { position: relative; padding: 0 0 0 28px; } ul>li i { position: absolute; top: 0; left: 0; width: 20px; text-align: center; } ul>li i.fa-google-plus { position: absolute; top: 2px; left: 2px; font-size: 14px; text-align: center; } 
       <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <h3>Contact</h3> <ul> <li><i class="fa fa-map-marker"></i> London, UK 441</li> <li><a href="tel:+75262685256"><i class="fa fa-phone"></i>Phone: +7 526 268 52 56</a></li> <li><a href="mailto:info@example.com"><i class="fa fa-envelope"></i>Email: info@example.com</a></li> <li><a href="#"><i class="fa fa-instagram"></i> Our Instagram </a> </li> <li><a href="#"><i class="fa fa-facebook"></i> We are on facebook </a> </li> <li><a href="#"><i class="fa fa-twitter"></i> Our twetter </a> </li> <li><a href="#"><i class="fa fa-google-plus"></i> We are on Google+ </a> </li> </ul>

      • And how is your option different from mine? - soledar10
      • @ soledar10 Take a closer look. - Vadizar