使用font-awesome图标的意外边距

Question

我有一个＆lt; ul＆gt;与list-style-type:none;。而不是列表图标我想显示一个自定义图标，该图标应该是可变的和可点击。为了确保自定义图标显示在文本左边距的左侧，我添加了text-indent:-17px;，这可以按预期工作。

但是，当我在文本中使用字体很棒的图标时，他们似乎将左边距（或更像是他们的text-indent）设置为包含＆lt; div＆gt;的缩进。在第一个＆lt; li＆gt;下方的快照中有一个text-indent:-17px，第二个0px和第三个+20px。

第一个清楚地显示了图标的负margin-left / text-indent，而最后一个显示了正余量。

如何解决此问题，以便我可以使用否定缩进？

问题出现在FireFox v29，IE v11和Chrome v35中 Font-Awesome是v4.1.0

---

我的代码：

<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

问题是text-indent是继承的。在第三项上将其设置为20px即将其添加到内部i

执行此类操作会重置text-indent。请注意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>

第二项没有做任何错误，因为你将缩进设置为0.它重叠了第一项中的文本，因为你有一个负缩进。

Answer 2

<强> Working Fiddle

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