From 8a84da6341e19011ce8f8e518d7b1cb7f0931da5 Mon Sep 17 00:00:00 2001
From: Maurice Wahba <wahbinatorm@gmail.com>
Date: Sat, 6 Jul 2013 22:20:56 +0400
Subject: [PATCH] Carousel no longer dependent on glyphicons

Used laquo/raquo for control buttons
Updated docs
---
 docs/assets/css/bootstrap.css | 16 ++++++++++++++--
 docs/javascript.html          | 16 ++++++++++------
 less/carousel.less            | 17 +++++++++++++++--
 3 files changed, 39 insertions(+), 10 deletions(-)

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;