Отступы от иконок

328

22 января 2017, 13:53

Добавил напротив иконок ссылки,добавил отступы иконкам в ,но ссылки идут не ровно в столбец. Полагаю из за разного размера иконок. Как можно их выравнять не используя Пробел?

    <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>

Answer 1

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>

Answer 2

Иконки имеют разную ширину, поэтому и отступы "пляшут", для того, чтобы они не плясали, просто укажите им конкретную ширину (максимальную для самой широкой иконки)

Answer 3

Думаю, вы ожидаете именно этот результат:

@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>