How to align list Items with font-awesome icon next line text?

Question

A picture paints a thousand words. The text on the next line needs to align on same margin as above.

HTML:

<ul>
<li>
<p><em class="fa fa-square"></em><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</span></p>
</li>
</ul>

CSS:

ul{
    display: table;
    a{
        padding-left: 10px;
    }
    span{
        padding-left: 10px;
    }
}

Update:

After @panther update:

It is acceptable, however the fontawesome icon is now off centre.

Answer 1

You can try to use font awesome's built-in solution for lists:

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

---

In your case, the code will change to something like this:

<ul class="fa-ul">
  <li><i class="fa fa-square"></i><span>Name and surnafdddddddddddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>

Answer 2

You are probably looking for st. like this.

em {float: left;}
a, span {margin: 0 0 0 20px; display: block;}