Wosley Alarico Wosley Alarico - 9 months ago 49
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">
<li>021 552 1187</li>
<li>Unit S19 Spearhead Business Park<br>
cnr Montague Drive &amp; Freedom Way<br>
Montagu Gardens<br>
Cape Town, South Africa</li>

Here my styling:

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

@extend .font-awesome-footer;
content: '\f003';

@extend .font-awesome-footer;
content: '\f041';

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

Answer Source

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;