title: Bootstrap glyphicon in button not behaving like supposed in mobile and internet explorer
body: <p>In my template I have a navigation button staying on the left side of the page as the user scroll down, triggering a menu when clicked.</p>
  
  <p>In this button, I put a bootstrap glyphicon :</p>
  
  <pre><code>&lt;div class="nav" id="sidebar"&gt;
      &lt;button class="toggle-slide-left btn btn-custom btn-cutsom-cat"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The glyphicon is well centered horizontally when the page is on desktop (high resolution), and when reduced on <em>Firefox</em>. But on mobile or with Internet Explorer, when the page get smaller (so the button too), the glyphicon stays on the right of the button, like if there was some sort of padding-left.</p>
  
  <p>I tried to put <code>pading-left: 0px; padding-right: 0px;</code> in the button's CSS, but it makes the glyphicon overflow when reducing the resolution.</p>
  
  <p>Here is my CSS :</p>
  
  <pre><code>.btn-custom-cat{
      height: 30px;
      width: 80%;
      margin-left: 5%;
      text-align: center;
  }
  #sidebar.affix-top {
    position: fixed;
    margin-top: 10px;
    width: 5%;
  } 
  #sidebar.affix {
    position: fixed;
    top: 60px;
    width: 5%;
  }
  </code></pre>
  
  <p>Firefox 30 full screen :</p>
  
  <p><img src="https://i.stack.imgur.com/tHMTA.png" alt="Firefox30 full screen"></p>
  
  <p>Firefox 30 reduced width :</p>
  
  <p><img src="https://i.stack.imgur.com/KB7QB.png" alt="Firefox30 reduced width"></p>
  
  <p>IE10 full screen :</p>
  
  <p><img src="https://i.stack.imgur.com/ZqJmK.png" alt="IE10 full screen"></p>
  
  <p>IE10 reduced width (problem here) :</p>
  
  <p><img src="https://i.stack.imgur.com/LNRzA.png" alt="IE10 reduced width (Problem here!)"></p>
  
  <p>You can see the website at this address (reduce the menu to see the button I'm talking about) : (removed after answer was given)</p>