将文本与字体真棒图标对齐

Question

我试图垂直对齐我的FontAwesome图标旁边的文本.我可以用padding-left手动完成,但这似乎不对.

有更简单的方法吗？

<div class="row">
<div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fas fa-snowflake"></i> A/C service<br/>
                <i class="fa fa-angle-right"></i> Aut-gear service<br/>
                <i class="fas fa-car-side"></i> Bil-leasing<br/>
                <i class="fas fa-car"></i> Bil-salg<br/>
                <i class="fas fa-oil-can"></i> Bilsyn<br/>
                <i class="fa fa-angle-right"></i> BMW Keyreader<br/>
                <i class="fa fa-angle-right"></i> BMW-testudstyr (ISTA)<br/>
                <i class="fas fa-book"></i> Digital servicebog<br/>
                <i class="fas fa-hotel"></i> Dækhotel<br/>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding<br/>
                <i class="fa fa-angle-right"></i> Klassiske biler<br/>
                <i class="fas fa-mug-hot"></i> Kundelounge<br/>
                <i class="fa fa-angle-right"></i> Låne/leje-biler<br/>
                <i class="fa fa-angle-right"></i> Skade-reparation<br/>
                <i class="fas fa-code"></i> Software-opdatering & kodning<br/>
                <i class="fas fa-tools"></i> Specialværktøj<br/>
            </ul>
        </div>
    </div>      
</div>

最好的祝福.

Answer 1

您应该进行以下修改:

• uls中的孩子应该li拥有正确的HTML,
• 使用fa-fw在一个固定的宽度设置图标,
• 删除br不再需要的s,

然后,您可以margin-right在li i元素上使用图标和文本之间添加更多间距.

ul {
  /* Remove the ul default styling */
  list-style: none;
}

li i {
  margin-right: 20px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅·⋅

如果您不需要在列表图标和文本之间添加一些空格,则还应执行以下操作:

• 使用fa-ul和fa-lis轻松替换默认子弹,
• 无需风格化ul或li.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-li fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-li fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-li fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-li fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-li fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-li fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-li fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-li fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅·⋅

有关详细信息,请查看Font Awesome示例.