css - Bootstrap glyphicon 仅悬停部分颜色

Question

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

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

Mac Safari 上的 Glyphicon 悬停部分颜色问题

score 3 · Accepted Answer

调整字母间距似乎有效。

.glyphicon{ 
  letter-spacing:3px;
}

score 1 · Accepted Answer

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

从小提琴：

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

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

score 0 · Accepted Answer

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

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

3 回答 3