Twitter Bootstrap carousel arrows not centered vertically depending on glyphicon

Question

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. 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. This is the nicely centered version (http://jsfiddle.net/AdF6b): ```

Slide 1

Neque porro quisquam est qui…

Accepted Answer

I have to admit, this issue is a bit strange. In Twitter Bootstrap, there are this particular lines:

```
.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}
```

Like you see, there is no `.glyphicon-circle-arrow-left` and no `.glyphicon-circle-arrow-right` class specified. So you can simply add it and everything should work fine:

```
.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}
```

Twitter Bootstrap carousel arrows not centered vertically depending on glyphicon

Solution

Problem