使用 fontawesome 图标缩进列表项答案

【问题标题】：Indenting list items with fontawesome icon使用 fontawesome 图标缩进列表项
【发布时间】：2020-12-27 18:29:54
【问题描述】：

我正在尝试让我的带有 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链接后的内容？希望你能帮忙。

【问题讨论】：

将您的li:before 分组并扩展.font-awesome-footer 以节省空间，我认为您应该考虑仅使用nth-child 以获得更一致的代码

标签： html css sass

【解决方案1】：

这很容易解决：

为列表项添加一些填充并将您的图标绝对定位在该填充区域中。

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

【讨论】：

【解决方案2】：

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

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

列出图标示例：

<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>

【讨论】：

【解决方案3】：

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

margin-right: 800px;

更改为最适合您的 800 像素

【讨论】：