我该如何解决字体真棒图标上的缩进问题? [英] How would I fix indentation on an font awesome icon?

问题描述

在使用此字体超赞图标作为列表来显示优点时，如何解决缩进问题?

How do I fix the indentation whilst using this font awesome icon as list to display advantages?

这是我的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来使刻度线变为绿色:

I don't have much CSS applied besides the following to make the tick green:

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

理想情况下我想要它，因此payable与No一致(参见图片)

Ideally I want it so the payable is in line with No (See Image)

推荐答案

如果不想更改标记，最简单的方法是给<p>元素position:relative并用position:absolute放置图标在填充区域内:

If you don't want to change the markup, the simplest way is to give the <p> element position:relative and place the icon with position:absolute inside the padded-area:

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

• Please note the above code is proof-of-concept and has selectors that are too general to be used in production environment (it would affect all the <p> elements in your project).
  To only apply it to (a) particular element(s) you could add a custom class to the desired <p> element(s).

另一种选择是将图标移到其父对象之外，然后使用display:flex;

Another option is to get the icon outside of its parent and wrap them together in a parent with 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 sum应用于<i>元素:

Yet another option is to give your text-indent a negative value equal to the sum of margin-left + padding-left properties. You'll need to apply the margin + padding sum to the <i> element, too:

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>

这篇关于我该如何解决字体真棒图标上的缩进问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！