带有图标字体和 css 更改颜色的错误答案

【问题标题】：Bug with icon font and css change color带有图标字体和 css 更改颜色的错误
【发布时间】：2014-02-21 06:26:17
【问题描述】：

我使用 bootstrap 3 和 glyphicons（PRO 版本，但几乎相同，多了一些图标）作为字体。

上下文中的示例代码：

<div class="col-md-4">
     <span class="glyph_icons compass"></span><br />
     <h4>Jurassic Park Lorem Ipsum</h4>
     <p>I was overwhelmed by the power of this place; but I made a mistake, too. I didn't have enough respect for that power and it's out now. The only thing that matters now are the people we love: Alan and Lex and Tim. John, they're out there where people are dying.</p>
 </div>

效果很好。现在我想添加一个悬停颜色变化，它有一些小故障。有时（但并非总是）它不能正确地改变图标侧面的颜色（它在跨度框之外的部分。有时它在鼠标悬停时失败，有时在鼠标悬停时又回到原始颜色。大约 1 秒后它会修复。

鼠标悬停失败：

MouseOut 失败：

注意：如果我将字母间距更改为 1.1em 或更大，它似乎可以解决图标右侧的问题，但找不到解决方法左边。

错误演示： http://www.bootply.com/116686

【问题讨论】：

你能提供一个关于 JSfiddle 的工作示例吗？我在黑暗中开枪说，向左添加填充也可以解决左侧的问题。
bootply.com/116686看左边
您好 Nazareno，如果该解决方案对您有用，您能否将我的答案标记为已接受的答案？这有助于其他有相同问题的人找到这个封闭的问题。谢谢！ :)

标签： css colors glyphicons icon-fonts

【解决方案1】：

我为您找到了解决方案。事实证明，该图标并未覆盖所提供的全部空间。

至少在 chrome 上解决此问题是将以下 css 属性添加到boothstrap 附带的图标集。

.glyphicon-sound-dolby:before {
    content: "\e190";
    padding: .1em;
}

我会把它放在通用图标类上，这样它会影响整个库，如果我没记错的话。将是 :before, :after 类名。很久没有使用这个库了，所以试着只针对我想说的图标。

:before, :after{
    box-sizing: border-box;
    padding: .1em;
}

编码愉快:)

【讨论】：