使用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;
    }
}

Answer 2

好的，我知道，这是一个旧线程，但现在解决方案更好，更清洁。

你应该使用 fa-ul 和 fa-li

示例：https://fontawesome.com/how-to-use/svg-with-js#additional-styling

列表图标部分包含以下示例：

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Answer 3

你可以使用margin-left：10px;但这不起作用，因为左边的图标都有不同的长度，所以为每个孩子做这样的事情：

margin-right: 800px;

更改为最适合您的800px