Bug with icon font and css change color

Question

I'm using bootstrap 3 and glyphicons (The PRO version, but it's almost the same, some more icons) as a font.

Sample code for one in context:

<div class="col-md-4">
     <span class="glyph_icons compass"></span><br />
     <h4>Jurassic Park Lorem Ipsum</h4>
     <p>I was overwhelmed by the power of this place; but I made a mistake, too. I didn't have enough respect for that power and it's out now. The only thing that matters now are the people we love: Alan and Lex and Tim. John, they're out there where people are dying.</p>
 </div>

It works well. Now I want to add a on hover color change, and it has some glitches. Sometimes (but not always) it doesn't correctly changes the color in the sides of the icon (the part that its outside of the span box. Sometimes it fails on the mouseover, and sometimes on the mouseout going back to the original color. After ~1s it fixes.

MouseOver Failed:

MouseOut Failed:

NOTE: If I change the letter-spacing to 1.1em or greater, it seems to fix the problem on the right side of the icon, but can't find a way to fix it on the left.

DEMO of the error: http://www.bootply.com/116686

Answer 1

I found a solution for you. It turns out the icon is not covering the full space that is provided.

Fixing this issue at least on chrome is adding the following css attribute to the iconset that comes with boothstrap.

.glyphicon-sound-dolby:before {
    content: "\e190";
    padding: .1em;
}

I would put it on the generic icon class so it effects the whole library, which if memory serves me right. Would be the :before, :after class names. Haven't worked with the library in ages, so try to just target the icons I would say.

:before, :after{
    box-sizing: border-box;
    padding: .1em;
}

Happy coding :)