html - 使用 fontawesome 图标缩进列表项

Question

我正在尝试使用 fontawesome 图标使我的列表项看起来像这样:

但目前，它们看起来像这样:

这是我的 HTML:

<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce">
  <h2 class="widget-title">Contact Us</h2>
  <div class="textwidget">
    <ul>
      <li>021 552 1187</li>
      <li>info@powersol.co.za</li>
      <li>Unit S19 Spearhead Business Park<br>
        cnr Montague Drive &amp; Freedom Way<br>
        Montagu Gardens<br>
        Cape Town, South Africa</li>
    </ul>
  </div>
</section>

这是我的样式:

section#black-studio-tinymce-6 div.textwidget ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  li {
    &:first-child:before {
      @extend .font-awesome-footer;
      content: '\f095';
    }

    &:nth-child(2):before {
      @extend .font-awesome-footer;
      content: '\f003';
    }

    &:last-child:before {
      @extend .font-awesome-footer;
      content: '\f041';
    }
  }
}

fontawesome链接后的内容如何缩进如图所示？希望你能帮上忙。

Answer 1

这很容易解决:

向列表项添加一些填充，并将您的图标绝对放置在该填充区域中。

li {
    padding-left: 40px;
    position: relative;
    &::before {
        display: inline-block;
        position: absolute;
        left: 0;
    }
}