html - 如何修复很棒的字体图标上的缩进？

Question

这个问题已经有答案了:

Text indent after the first line in a paragraph (5 个回答)

已关闭 5 年前。

如何在使用此 Font Awesome 图标作为列表来显示优点的同时修复缩进？

这是我的 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> 元素)。< br/>要仅将其应用于特定元素，您可以将自定义类添加到所需的 <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>