带有字体真棒图标的意外边距

Question

我有一个带有list-style-type:none; 的

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

但是，当我的文本中有字体很棒的图标时，它们的左边距（或者更像是它们的text-indent）设置为包含

的缩进。在下面的快照中，第一个

有一个 text-indent:-17px，第二个 0px，第三个 +20px。

第一个明显地为图标显示了一个负的margin-left/text-indent，而最后一个有一个正的margin-left。

我该如何解决这个问题，以便我可以使用负缩进？




问题在 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>

【问题讨论】：

• 我无法理解您的预期输出...您也可以分享预期输出的屏幕截图吗？
• @Aamir - 单词“ipsum”和它后面的图标之间的空格应该和第二项一样。
• 知道了...在提供的 HTML 中缺少 的 CSS
• @Aamir - Font-Awesome 与外部 CSS 库一起工作，这里包含的时间太长了。顺便说一句，AFAIK 没有应该表现得像这样的 CSS。

Answer 1

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

这样做会重置文本缩进。注意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
}