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?

Glyphicon hover partially colored issue on Mac Safari

score 3 · Accepted Answer · edited Mar 27 '14 at 20:01

3

Adjusting letter spacing seems to work.

.glyphicon{ 
  letter-spacing:3px;
}

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

edited Mar 27 '14 at 20:01

Phlume

3,075
2
19
38

answered Mar 13 '14 at 19:27

Alex

46
3

This is correct: adding `letter-spacing` does fix it. But for the up-to-date working demo, use the fiddle mentioned by Lorenz below: http://jsfiddle.net/Ru8ME/12/ – Alex Coleman Mar 03 '16 at 14:13

Lorenz Forvang · Answer 2 · 2014-03-28T19:28:29.963

1

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!

edited Mar 28 '14 at 19:28

answered Feb 24 '14 at 04:37

Lorenz Forvang

265
2
12

Both iterations in the fiddle still render improperly in Safari 7.0.2 on Mac. – Alex Coleman Mar 04 '14 at 11:03
1

add the letter spacing as assisted by Alex above... worked in Chrome on PC... Test in Mac? jsfiddle.net/Ru8ME/8 – Phlume Mar 27 '14 at 20:02

score 0 · Answer 3 · answered Feb 24 '14 at 02:38

0

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

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

http://jsfiddle.net/5Mjq7/

answered Feb 24 '14 at 02:38

AnsellC

795
3
9
17

Bootstrap glyphicon hover only partially colored

3 Answers3