diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d3bea53f3c..2f6904cce7 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4396,7 +4396,9 @@ a.list-group-item.active > .badge, filter: alpha(opacity=90); } -.carousel-control .glyphicon { +.carousel-control .glyphicon, +.carousel-control .icon-prev, +.carousel-control .icon-next { position: absolute; top: 50%; left: 50%; @@ -4408,6 +4410,14 @@ a.list-group-item.active > .badge, margin-left: -10px; } +.carousel-control .icon-prev:before { + content: '\00ab'; +} + +.carousel-control .icon-next:before { + content: '\00bb'; +} + .carousel-indicators { position: absolute; bottom: 20px; @@ -4456,7 +4466,9 @@ a.list-group-item.active > .badge, } @media screen and (min-width: 768px) { - .carousel-control .glyphicon { + .carousel-control .glyphicon, + .carousel-control .icon-prev, + .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; diff --git a/docs/javascript.html b/docs/javascript.html index 91198bd197..0f5d372596 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1512,10 +1512,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> </div><!-- /example --> @@ -1541,13 +1541,17 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> {% endhighlight %} +<div class="bs-callout"> + <h4>Glyphicon Alternative</h4> + <p>With <a href="/css/#glyphicons">Glyphicons</a> available, you may choose to style the left and right toggle buttons with <code>.glyphicon-chevron-left</code> and <code>.glyphicon-chevron-right</code>.</p> +</div> <h3>Optional captions</h3> <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> @@ -1586,10 +1590,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { </div> </div> <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> </div><!-- /example --> diff --git a/less/carousel.less b/less/carousel.less index 8834c6f7b8..d41fc07ada 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -99,7 +99,7 @@ } // Toggles - .glyphicon { + .glyphicon, .icon-prev, .icon-next { position: absolute; top: 50%; left: 50%; @@ -110,6 +110,17 @@ margin-top: -10px; margin-left: -10px; } + // Non-glyphicon toggles + .icon-prev { + &:before { + content: '\00ab'; + } + } + .icon-next { + &:before { + content: '\00bb'; + } + } } // Optional indicator pips @@ -167,7 +178,9 @@ @media screen and (min-width: @screen-tablet) { // Scale up the controls a smidge - .carousel-control .glyphicon { + .carousel-control .glyphicon, + .carousel-control .icon-prev, + .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px;