css - 为什么在 CSS 中使用带有大填充的 Bootstrap Glyphicons 会导致出现不需要的图标？

Question

我知道如何显示这样的图标:

<span class='icon-remove'></span>

但是如果我将 padding 添加到 span 中，就会显示额外的图标。如何解决？

span {
    padding-right:60px;
}

fiddle

Answer 1

字形使用一个大图像映射(或所谓的 CSS Sprite )呈现，因此如果您在元素的任一侧留有足够的空间，它也会显示其他字形。我想到了两个解决方案:

1) 将图标放在包含元素中:

<span><i class='icon-remove'></i></span>

2) 或者使用边距:

span { margin-right: 60px }