Topic: How to change colour of icon controls on carousel?

nathangrieve10 free asked 3 years ago

I'm trying to change the icon controls (arrows) for the MDB carousel here. I tried changing to a fontawesome icon but then a white box appears for some odd reason beside it so I can't do it that way. How can I change the colour here? Need the icons white for a dark background.

Grzegorz Bujański staff commented 3 years ago

I'm confused. Do you want to change the icon or just its color and background color?

nathangrieve10 free commented 3 years ago

The colour of the icon

Grzegorz Bujański staff answered 3 years ago

You miss before :) try this:

.testimonial-carousel .carousel-control:hover::before {
    color: red !important;

.testimonial-carousel .carousel-control:hover::after {
    color: red !important;

nathangrieve10 free answered 3 years ago

Thanks, that worked! Though after hovering it still turns black. I tried:

.testimonial-carousel .carousel-control::hover {
    color: red!important;

.testimonial-carousel .carousel-control::after {
    color: red!important;

But that doesn't seem to work for some reason?

Grzegorz Bujański staff answered 3 years ago

Have you tried to overwrite their color in css?

.testimonial-carousel .carousel-control::before {
    color: black;

And don't forget about opacity:

.testimonial-carousel .carousel-control {
  opacity: unset;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes