From 1abe4c83a8cba718daf8fd60749ef94e2cfadccd Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 4 Dec 2016 21:54:45 -0800
Subject: [PATCH] redo control icons to use open iconic svgs inlined

---
 scss/_carousel.scss  | 25 +++++++++----------------
 scss/_variables.scss |  3 +++
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index e15fba8fbd..f51dc2a3ac 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -83,9 +83,9 @@
   right: 0;
 }
 
-// Toggles
-.carousel-control-icon-prev,
-.carousel-control-icon-next {
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
   position: absolute;
   top: 50%;
   z-index: 5;
@@ -95,25 +95,18 @@
   margin-top: -($carousel-icon-width / 2);
   font-family: serif;
   line-height: 1;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
 }
-.carousel-control-icon-prev {
+.carousel-control-prev-icon {
   left: 50%;
   margin-left: -($carousel-icon-width / 2);
+  background-image: $carousel-control-prev-icon-bg;
 }
-.carousel-control-icon-next {
+.carousel-control-next-icon {
   right: 50%;
   margin-right: -($carousel-icon-width / 2);
-}
-
-.carousel-control-icon-prev {
-  &::before {
-    content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
-  }
-}
-.carousel-control-icon-next {
-  &::before {
-    content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
-  }
+  background-image: $carousel-control-next-icon-bg;
 }
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index fab5ec54e8..c638057c21 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -900,6 +900,9 @@ $carousel-caption-color:                      #fff !default;
 
 $carousel-icon-width:                         20px !default;
 
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 
 // 34. Close