Howto not lose Carousel nav icon styling when switching to different icons.

Bootstrap Studio Help
1

An issue was brought up with the Carousel in which if you change the icon to something other than the glyphicon-chevron-left/right icons you lose the styling of it i.e. position etc..

This is an issue with the provided Carousel it's self not actually a result of the Carousel Hero online component I shared.

For those that would like a method on working around that issue, here is the CSS for it. This will override the default Bootstrap CSS

.carousel-control .custom-icon-left, .carousel-control .custom-icon-right {
  position:absolute;
  top:50%;
  z-index:5;
  display:inline-block;
  margin-top:-10px;
}
.carousel-control .custom-icon-right {
  right:50%;
  margin-right:-10px;
}
.carousel-control .custom-icon-left {
  left:50%;
  margin-left:-10px;
}
@media screen and (min-width:768px) {
  .carousel-control .custom-icon-left, .carousel-control .custom-icon-right {
    width:30px;
    height:30px;
    margin-top:-10px;
    font-size:30px;
  }
}
@media screen and (min-width:768px) {
  .carousel-control .custom-icon-right {
    margin-right:-10px;
  }
}
@media screen and (min-width:768px) {
  .carousel-control .custom-icon-left {
    margin-left:-10px;
  }
}

Once that's in place you just add the classes of custom-icon-left to the left icon and custom-icon-right to the right icon.

Now you can switch to use any of the icons in the BSS icon tool.

This is for Bootstrap 3 only, Bootstrap 4 has dropped glyphicon support as default and are using background-image:url(data:img..) svgs instead.

Hope that helps :)

Saj