Wosley Alarico Wosley Alarico - 9 days ago 5
CSS Question

Indenting list items with fontawesome icon

Am trying to make my list items with font awesome icons look like this:

enter image description here

but at the moment, they look like this:

enter image description here

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.

Answer

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