带有超赞字体的图标出现意外边距

Question

I have a <ul> with list-style-type:none; . Instead of the list-icon I want to show a custom icon which should be variable and clickable. To make sure the custom icon appears to the left of the text's left margin, I added text-indent:-17px; and this works as expected.

However, when I have font-awesome icons in my text they seem to have their left margin (or, more like, their text-indent ) set to the indent of the containing <div>. In the snapshot below the first <li> has a text-indent:-17px , the second 0px , and the third +20px .

The first one clearly shows a negative margin-left / text-indent for the icon, while the last one has a positive margin-left.

How can I fix this, so that I can work with the negative indent?

The problem shows in FireFox v29, IE v11 and Chrome v35.
Font-Awesome is v4.1.0

---

My code:

<ul style="list-style-type:none;">
    <li>
      <div style="text-indent:-17px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit. 
      </div>
    </li>
    <li>
      <div style="text-indent:0px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit. 
      </div>
    </li>
    <li>
      <div style="text-indent:20px; margin-bottom:20px;">
        <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
        Lorem <a href="#">ipsum  <i class="fa fa-external-link"></i></a> dolor sit amet, consectetur adipiscing elit.
      </div>
    </li>
</ul>

Answer 1

The issue is that text-indent is inherited. Setting that to 20px on the third item is adding it to the inner i

Doing something like this would reset the text-indent. Note the added style on the i

http://jsfiddle.net/dJqUh/2/

<li>
  <div style="text-indent:20px; margin-bottom:20px;">
    <img src="http://i.stevenvh.net/tam_none.png" alt="" /> 
    Lorem <a href="#">ipsum  <i class="fa fa-external-link" style="text-indent:0px;"></i></a> dolor sit amet, consectetur adipiscing elit.
  </div>
</li>

It didn't do anything wrong for the second item because you set the indent to 0. It overlapps the text in the first because you have a negative indent.

Answer 2

Working Fiddle

a
{
    text-indent: 0; // inherited CSS - override it to fix the issue
}