Html 带有字体图标的意外边距

我有一个

和

列表样式类型：无。而不是列表图标，我想显示一个自定义图标，它应该是可变的和可点击的。为了确保自定义图标显示在文本左边距的左侧，我添加了
文本缩进：-17px，这是预期的效果

但是，当我的文本中有字体很棒的图标时，它们的左边距（或者更像是
文本缩进
）似乎设置为包含文本的缩进。在下面的快照中，第一个
具有
文本缩进：-17px
，第二个
0px
，第三个
+20px


第一个图标清楚地显示图标的负
左边距
/
文本缩进
，而最后一个图标的左边距为正

我怎样才能修复这个问题，这样我就可以使用负缩进了



问题出现在FireFox v29、IE v11和Chrome v35中。

字体是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>



洛雷姆·多洛·西特·阿梅特，一位杰出的献祭者。


洛雷姆·多洛·西特·阿梅特，一位杰出的献祭者。


洛雷姆·多洛·西特·阿梅特，一位杰出的献祭者。


问题在于继承了
文本缩进。在第三项上将其设置为20px将其添加到内部
i

这样做会重置文本缩进。注意
i



洛雷姆·多洛·西特·阿梅特，一位杰出的献祭者。


它没有对第二项做任何错误，因为您将缩进设置为0。它与第一个文本重叠，因为缩进为负数。

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

我无法理解您的预期输出。。。你能分享一个预期输出的截图吗？@Aamir-单词“ipsum”和它后面的图标之间的空间应该和第二项一样。明白了。。。提供的中缺少的CSSHTML@Aamir-Font Awesome可与外部CSS库一起使用，这太长了，无法包含在此处。顺便说一句，这里没有CSS应该这样做。实际上，文本缩进应该应用于i标记，而不是a标记。见尼科的回答。不管怎样，谢谢你的回复。也许这是正确的方法-也许它也能解决这个问题。。。
a
{
    text-indent: 0; // inherited CSS - override it to fix the issue
}