我将如何修复字体真棒图标上的缩进？

Question

如何在使用这个超棒的字体图标作为列表显示优点时修复缩进？

这是我的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 一致（见图）

Answer 1

如果您不想更改标记，最简单的方法是给 <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>您项目中的元素）。
要仅将其应用于 (a) 特定元素，您可以将自定义 class 添加到所需的 <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 属性之和的负值。您还需要将边距 + 填充总和应用于 <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>

Answer 2

你只需要这个css：

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

您还可以添加 padding-right: 10px;。

Answer 3

考虑使用 Font Awesome 列表项实用程序类，例如 fa-ul 和 fa-li

参考：Font Awesome Examples - List Icons

代码片段演示：

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

我将如何修复字体真棒图标上的缩进？

How would I fix indentation on an font awesome icon?

html

css

indentation

font-awesome