Как бы я исправил отступ на значке шрифта?

Как мне исправить отступы, используя этот шрифт в виде списка, чтобы отобразить преимущества?

Это мой HTML:

<p> <i class="f_item_tick fa fa-check"></i>
No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into.
</p>

У меня не так много CSS применено, кроме следующего, чтобы сделать галочку зеленой:

.f_item_tick {
    color: #00a885;
    font-size:1.8rem;
}

В идеале я хочу, чтобы payable соответствует No (См. Изображение)

Исправление отступов

Источник

3 ответа

Решение

Если вы не хотите менять разметку, самый простой способ - <p> элемент position:relative и поместите значок с position:absolute внутри мягкой области:

p {
  padding-left: 2em;
  position: relative;
}

p .fa {
  position: absolute;
  left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p> 
  <i class="f_item_tick fa fa-check"></i> 
  No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. 
</p>

  • Обратите внимание, что приведенный выше код является проверкой концепции и имеет селекторы, которые являются слишком общими для использования в производственной среде (это повлияет на все <p> элементы в вашем проекте).
    Чтобы применить его только к (а) конкретному элементу (ам), вы можете добавить собственный класс к желаемому <p> элемент (ы).

Другой вариант - вывести значок за пределы родительского объекта и обернуть их вместе display:flex;

.flex-item {
  display: flex;
}
.flex-item .fa {
  padding: 1em 1em 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  
<div class="flex-item">
  <i class="f_item_tick fa fa-check"></i>
  <p> No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. </p>
</div>

Еще один вариант - дать text-indent отрицательное значение, равное сумме margin-left + padding-left свойства. Вам нужно будет применить сумму margin + padding к <i> элемент тоже:

p {
  text-indent: -2em;
  margin-left: 1em;
  padding-left: 1em;
}
p .fa {
  margin-left: 1.5em;
  padding-left: 0.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>
  <i class="fa fa-check"></i>No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. 
</p>

Источник

Рассмотрите возможность использования служебных классов Font Awesome list-item, .eg fa-ul а также fa-li

Ссылка: Font Awesome Примеры - Список значков

Демонстрация фрагмента кода:

.f_item_tick {
  color: #00a885;
  font-size: 1.8rem;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<ul class="fa-ul">
  <li><i class="fa-li f_item_tick fa fa-check fa-fw"></i> No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. </li>
</ul>

Источник

Вам просто нужно это CSS:

.f_item_tick {
            color: #00a885;
            font-size:1.8rem;
            display: block;
            float: left;
        }

Вы также можете добавить padding-right: 10px; к этому.

Источник
Другие вопросы по тегам