Bootstrap: Cannot change carousel control colors in v4 alpha 6

[tab00]

It appears that the left and right icons of the carousel are now SVG images instead of chevron characters. In the browser inspector I see the following style definition for the <span class="carousel-control-next-icon" aria-hidden="true"></span> element:

.carousel-control-next-icon {
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' f…%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);
}

Since the icon is now an image, would this be the reason for the inability to change its color?

[Johann-S]

IMO the only way to change color is to override .carousel-control-next-icon and change SVG code for example :

.carousel-control-next-icon {
    background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' 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")
    color: black;
}

I changed fill attribut to %23ff0000 to produce a red chevron (original fill attribut was %23fff)

[tab00]

Thanks for the workaround. I changed the value of fill from %23fff to %23aaa in order to have gray icons.

Gray should have been the default color instead of white because my carousel background is white.

I assume the color: black; in your example doesn't actually do anything.

I hope this will be officially fixed soon so that everyone can simply use color.

[Johann-S]

Yes color: black; don't do anything.

Bootstrap made the choice to use SVG so IMO for V4 this won't change and the only way to change the color of an SVG is to use fill attribute

[linusbrolin]

There is another way.
You can set other values for these variables in Sass to change the colors:

$carousel-control-color
$carousel-caption-color
$carousel-indicator-active-bg

However, it doesn't solve the problem when some images have a white background, and some have a black (or dark) background.
It also doesn't solve the issue for when I want to use several different carousels, with different colored images, on the same page.

What they _should_ have done, is to either continue using chevrons instead of svg, or to make the svg have an outline or background with an opposite color, so that they are visible nomatter what color the image background has.

[linusbrolin]

For now, I've overridden bootstraps defaults in my project with FontAwesome chevrons and text-shadow, using Sass extend.
In case more people are interested in this override:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  /* turn off bootstrap default svg chevrons */
  background-image: none;

  /* override bootstraps fixed size */
  width: auto;
  height: auto;

  /* set the size and color of the FontAwesome chevrons */
  font-size: 1.5rem;
  color: $carousel-control-color;

  /* extend FontAwesome */
  @extend .fa;
}
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-caption {
  /* add a text shadow to the chevrons and caption (inner text) to make them visible on white backgrounds */
  text-shadow: 0 0 0.8rem black;
}
.carousel-control-prev-icon {
  /* extend FontAwesome left chevron*/
  @extend .fa-chevron-left;
}
.carousel-control-next-icon {
  /* extend FontAwesome right chevron*/
  @extend .fa-chevron-right;
}
.carousel-indicators li {
  /* add a box shadow to the indicators to make them visible on white backgrounds */
  box-shadow: 0 1px 0.4rem rgba(0, 0, 0, 0.5);
}

[mdo]

$carousel-control-color is available for customization and is automatically included in the SVGs during compilation from Sass to CSS.

[linusbrolin]

@mdo, yes but like I said, that does not solve the problems I highlighted in my previous posts.

[wmzd]

.carousel-control-next-icon {
background-image : url(images/my_own_next_icon.png);
}

[kjdion84]

Just change the content of the control links e.g.:

                <a class="carousel-control-prev" href="#carousel" data-slide="prev">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a class="carousel-control-next" href="#carousel" data-slide="next">
                    <i class="fa fa-chevron-right"></i>
                </a>

Theres an example using fontawesome. Then you can even add text color classes to the link.

[alemieux3]

kjdion84 Thank you! Saved my day!

[aditithakur]

.carousel-control-next-icon {
background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' 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")
color: black;
}

How to add above code in the css while using 'ngb-carousel'?

[mdo]

Old issues from old and unsupported code aren't the place for general how-to information, sorry. Please try our Slack channel or Stack Overflow.