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/