1

У разных иконок - разная ширина. И из-за этого разбивается начало текста. Как выровнять?

пикча

<li><span><i class="fas fa-home"></i><span class="ml-2">для ипотеки - от 4500руб.</span></span></li>
<li><span><i class="far fa-balance-scale"></i><span class="ml-2">для суда - от 7000руб.</span></span></li>
<li><span><i class="fas fa-handshake"></i><span class="ml-2">для продажи - от 4000руб.</span></span></li>
<li><span><i class="fas fa-gavel"></i><span class="ml-2">для наследства - от 4000руб.</span></span></li>
1

2 ответа 2

3

Для этого можно воспользоваться классом fa-fw

ul{
  padding-left: 0;
}
li{
  list-style: none;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<ul>
    <li>
        <i class="fas fa-home fa-fw"></i>
        <span class="ml-2">для ипотеки - от 4500руб.</span>
    </li>
    <li>
        <i class="fas fa-balance-scale fa-fw"></i>
        <span class="ml-2">для суда - от 7000руб.</span>
    </li>
    <li>
        <i class="fas fa-handshake fa-fw"></i>
        <span class="ml-2">для продажи - от 4000руб.</span>
    </li>
    <li>
        <i class="fas fa-gavel fa-fw"></i>
        <span class="ml-2">для наследства - от 4000руб.</span>
    </li>
</ul>

2
  • Это просто ох***но!
    – barmaxon
    5 мая 2019 в 7:23
  • @soledar10 хороший, полезный ответ (+) 3 июн 2019 в 8:43
0

Можно использовать min-width...

.fas {
  min-width: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
<li><span><i class="fas fa-home"></i><span class="ml-2">для ипотеки - от 4500руб.</span></span>
</li>
<li><span><i class="fas fa-balance-scale"></i><span class="ml-2">для суда - от 7000руб.</span></span>
</li>
<li><span><i class="fas fa-handshake"></i><span class="ml-2">для продажи - от 4000руб.</span></span>
</li>
<li><span><i class="fas fa-gavel"></i><span class="ml-2">для наследства - от 4000руб.</span></span>
</li>

P.S. У Вас опечатка во второй строке far -> fas

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.