redo control icons to use open iconic svgs inlined

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index e15fba8fbdc9852dfca1403fa0fdc3bb0dbafb57..f51dc2a3ac5610cf19e5c19fe10c77e8e8ba38cc 100644 (file)
--- 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 fab5ec54e8f7f1d5088d462c507d5e8f427de3fc..c638057c21cf90447c6e422e61fd793509a02368 100644 (file)
--- 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