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