Bootstrap glyphicon 仅悬停部分颜色答案

【问题标题】：Bootstrap glyphicon hover only partially coloredBootstrap glyphicon 仅悬停部分颜色
【发布时间】：2014-01-17 20:42:23
【问题描述】：

我正在使用 Bootstrap 的 glyphicon 字体在菜单链接中呈现图标。它们有一个 CSS :hover 效果，使它们在悬停时改变颜色。对于大多数字形图标来说，这工作得很好，但由于某种原因，当使用“打开文件夹”图标时，图标的右侧部分在悬停时 not 正确着色 - 它仍然是默认值，未悬停的颜色。

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

【问题讨论】：

标签： css twitter-bootstrap icon-fonts

【解决方案1】：

调整字母间距似乎有效。

.glyphicon{ 
  letter-spacing:3px;
}

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

【讨论】：

这是正确的：添加 letter-spacing 确实可以解决它。但是对于最新的工作演示，请使用下面 Lorenz 提到的小提琴：jsfiddle.net/Ru8ME/12

【解决方案2】：

编辑： 按照 Alex 的建议，增加 letter-spacing CSS 属性：

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

从小提琴：

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

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

【讨论】：

小提琴中的两个迭代在 Mac 上的 Safari 7.0.2 中仍然无法正确呈现。
在上面 Alex 的帮助下添加字母间距...在 PC 上的 Chrome 中工作...在 Mac 中测试？ jsfiddle.net/Ru8ME/8

【解决方案3】：

您可以做的一个快速破解是添加一个填充。

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

http://jsfiddle.net/5Mjq7/

【讨论】：