-
-
Notifications
You must be signed in to change notification settings - Fork 78.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot change carousel control colors in v4 alpha 6 #21985
Comments
IMO the only way to change color is to override .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 |
Thanks for the workaround. I changed the value of Gray should have been the default color instead of white because my carousel background is white. I assume the I hope this will be officially fixed soon so that everyone can simply use |
Yes 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 |
There is another way.
However, it doesn't solve the problem when some images have a white background, and some have a black (or dark) background. 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. |
For now, I've overridden bootstraps defaults in my project with FontAwesome chevrons and text-shadow, using Sass extend.
|
|
@mdo, yes but like I said, that does not solve the problems I highlighted in my previous posts. |
.carousel-control-next-icon { |
Just change the content of the control links e.g.:
Theres an example using fontawesome. Then you can even add text color classes to the link. |
kjdion84 Thank you! Saved my day! |
.carousel-control-next-icon { How to add above code in the css while using 'ngb-carousel'? |
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. |
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:Since the icon is now an image, would this be the reason for the inability to change its color?
The text was updated successfully, but these errors were encountered: