How to change colour of icon controls on carousel?


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

nathangrieve10 asked 2 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 2 years ago

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


nathangrieve10 commented 2 years ago

The colour of the icon


Grzegorz Bujański staff answered 2 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;
}

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 2 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;
}

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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