Indenting list items with fontawesome icon

问题

I am trying to make my list items with fontawesome icons look like this:

but at the moment, they look like this:

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

Here my styling:

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';
    }
  }
}

How can indent the content after the fontawesome links as the picture shows? Hope you can help.

回答1:

That's very easy to solve:

Add some padding to the list items and position your icons absolute in that padding area.

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

回答2:

Ok, I know, it's an old thread, but now the solution is better and cleaner.

You should use fa-ul and fa-li

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

There is List Icons section with examples like that:

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

you can use margin-left: 10px; but that would not work since the icons one the left all have different length so do something like this for each child:

margin-right: 800px;

make changes to 800px which can suit you the most

来源：https://stackoverflow.com/questions/40860490/indenting-list-items-with-fontawesome-icon

标签

html

css

Sass