Bootstrap glyphicon hover only partially colored

Question

I'm utilizing Bootstrap's glyphicon font to render icons within menu links. They have a CSS :hover effect that causes them to change color upon hover. For most of the glyphicons this works perfectly fine, but for some reason, when using the "open folder" icon, the right portion of the icon is not properly colored on hover -- it remains the default, unhovered color.

It's only happening on Safari on Mac (seems to work fine on Chrome). I've attached a screenshot. Any thoughts?

Answer 1

Adjusting letter spacing seems to work.

.glyphicon{ 
  letter-spacing:3px;
}

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

Answer 2

Edit: as suggested by Alex, increase the letter-spacing CSS attribute:

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

From the fiddle:

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

I can confirm this works on Safari 7.0.2 and Chrome 33 for OS X!

Answer 3

a quick hack you could do is to add a padding.

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

http://jsfiddle.net/5Mjq7/