Bootstrap glyphicon仅悬停部分着色

Question

我正在使用Bootstrap的glyphicon字体来渲染菜单链接中的图标。它们有一个CSS：悬停效果，导致它们在悬停时改变颜色。对于大多数glyphicons来说，这非常好用，但出于某种原因，当使用“打开文件夹”图标时，图标的右侧部分不在悬停时正确着色 - 它仍然是默认值，未发现的颜色。

这只发生在Mac上的Safari上（似乎在Chrome上运行正常）。我附上了截图。有什么想法吗？

Answer 1

调整字母间距似乎有效。

.glyphicon{ 
  letter-spacing:3px;
}

http://jsfiddle.net/Ru8ME/8/

Answer 2

按照Alex的建议

编辑，增加字母间距CSS属性：

http://jsfiddle.net/Ru8ME/12/

来自小提琴：

.glyphicon {
  font-size: 40px;
  color: #0C6;
  letter-spacing:6px;
}
.glyphicon:hover {
  color: #F00;
}

我可以确认这适用于Safari 7.0.2和适用于OS X的Chrome 33！

Answer 3

你可以做的快速黑客是添加填充。

.glyphicon-folder-open {padding-right: 10px;}

http://jsfiddle.net/5Mjq7/