Glyphicon's hover effect is offset - Bootstrap 3 - html

Question

I am having an issue with :hover on a glyphicon within a span.
I am not sure if the glyphicon is not filling the whole span, or if there are some hidden paddings/margins I am not seeing. I have tried to manual set all sorts of weird styles to get a nice glow border around my glyphicon but nothing is working.
Image (hovering over the gold color in this image)
Example
JSFiddle Demo
CSS
.glyphicon-stop:hover {
-webkit-box-shadow: 0 0 10px yellow;
}
View
<div>
<p id="hoverColor" style="font-size: 12px; width: 110px; background: black; display: inline-block; text-align: center; color:white; margin:0px; padding:0px">Color Code</p>
</div>
<div id="colorCode" style="margin:0px; padding:0px">
<span class="glyphicon glyphicon-stop" id="_Group Event" style="color: red; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Misc. Event" style="color:orangered; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Online Event" style="color:purple; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Group Party" style="color:blue; font-size: 20px"></span>
<span class="glyphicon glyphicon-stop" id="_Tournament" style="color:darkorange; font-size: 20px"></span>
</div>
JQuery
$('[id^=_]').hover(function () {
//alert($(this).attr('id'));
document.getElementById("hoverColor").innerHTML = $(this).attr('id').replace('_', '');
}, function () {
document.getElementById("hoverColor").innerHTML = "Color Code";
}
);
Any help on getting the border to be around JUST the glyphicon and not be offset would be appreciated!

Answer 1

This is not a solution, more an explanation about what there is going on. The behaviour is caused by the fact, that the bootstrap glyphicons not is filling out the entire area. They have all some built in "margin" or "padding". In your case you are using the following glyph :
.glyphicon-stop:before {
content: "\e074";
}
see all the glyphs here -> http://www.bootply.com/61521
here is a demonstration how much "margin" or "padding" the \e074 "video stop" glyph contains :
your fiddle forked -> http://jsfiddle.net/Ay9Mj/
That matches, surprise surprise, your bad experience in the question. So the error is the glyphs themselves, not some bad CSS or errors in the markup. I would suggest you go away from the "video stop" glyph, and use a fair square icon or simply just a rectangular <span>. Why use those glyphs anyway, when you just want to show a square?