title: Twitter Bootstrap carousel arrows not centered vertically depending on glyphicon
body: <p>I created a Twitter Bootstrap carousel with the default arrows (glyphicon-chevron-left and glyphicon-chevron-right). These are nicely centered vertically in the carousel.</p>
  
  <p>I though about replacing these icons with two different icons, namely glyphicon-circle-arrow-left and glyphicon-circle-arrow-right. But for some reason, when only replacing the icons, they are suddenly not centered vertically anymore. I can't find out why.</p>
  
  <p>This is the nicely centered version (<a href="http://jsfiddle.net/AdF6b" rel="nofollow">http://jsfiddle.net/AdF6b</a>):</p>
  
  <pre><code>    &lt;div class="row"&gt;
        &lt;div  id="foto-carousel" class="carousel slide"&gt;
          &lt;ol class="carousel-indicators"&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="1"&gt;&lt;/li&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;!-- Carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="active item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/1"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 1&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/3"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 2&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/5"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 3&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#foto-carousel" data-slide="prev"&gt;
            &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt; --&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#foto-carousel" data-slide="next"&gt;
            &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>The non centered version (<a href="http://jsfiddle.net/AdF6b/1/" rel="nofollow">http://jsfiddle.net/AdF6b/1/</a>):</p>
  
  <pre><code>&lt;div class="row"&gt;
        &lt;div  id="foto-carousel" class="carousel slide"&gt;
          &lt;ol class="carousel-indicators"&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="1"&gt;&lt;/li&gt;
            &lt;li data-target="#foto-carousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;!-- Carousel items --&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="active item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/1"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 1&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/3"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 2&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item"&gt;
              &lt;img src="http://lorempixel.com/g/1600/800/city/5"&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;h4&gt;Slide 3&lt;/h4&gt;
                &lt;p&gt;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#foto-carousel" data-slide="prev"&gt;
            &lt;span class="glyphicon glyphicon-circle-arrow-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#foto-carousel" data-slide="next"&gt;
            &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Why are the arrows in the second version not centered? The only difference is the glyphicon classes.</p>