Yes, works the same using a Lightbox also. You need to delete the old classes and add the new ones.
I had to do this with one of my projects I migrated. In my opinion being able to make them larger with the stroke you really don’t need to do anything with the background around the arrow.
Casey
hey Jerry, thanks… It’s odd because when I first added the class that was to control the “Carousel Navigation Arrows” it automatically generated the .carousel-nav-controls class but now when I do that same procedure, it automatically generates the .carousel-nav-icon class WHICH DOES WORK so thank you for pointing that out. I had manually added that class to the code in the header but have since removed it now as it’s no longer needed.
Lastly though, do you have any idea how to adjust the SIZE of the carousel arrows?
Thanks!
Hi @Creative,
Blockquote
Lastly though, do you have any idea how to adjust the SIZE of the carousel arrows?
As the Icons are svg you should be able to change them and resize them. How? No clue yet but will find out and let you know!
Hi @Creative, I’ve managed to change / resize the buttons! YaY! 
. However, by no means I’m able to centre them and I can’t get my head around it. 
When adding a class to align the buttons it does in Blocs but when previewing nothing happens. I’ve attached the file. @PeteSharp @Pealco @Whittfield the challenge is on for a coffee! 
@Jerry. Try
.carousel-control-next, .carousel-control-prev {height: 100%!important;}If you want to give the icons a bit more space around them, add to the same classes something like margin: 2rem; You will have to play a bit.
Awesome it worked!
For anyone who wants to use, attached the complete Blocs file. Code can be found here and Bootstrap icons here.
That’s super cool! - thanks!
I found some code online from 2017. I changed the class names as they’ve been updated and after playing around a bit I was able to resize the arrow icons but can’t seem to adjust the height of the background behind the arrows… Anyone want to try and resolve that part?
Here’s the code I used:
.carousel-control-prev {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg xmlns=‘SVG namespace’ fill=‘#FFCC00’ viewBox=‘0 0 8 8’%3E%3Cpath d=‘M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z’/%3E%3C/svg%3E”);
}
.carousel-control-next {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg xmlns=‘SVG namespace’ fill=‘#FFCC00’ viewBox=‘0 0 8 8’%3E%3Cpath d=‘M2.75 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”);
}
.carousel-control-next, .carousel-control-prev {
margin-top:auto;
margin-bottom:auto;
width: 48px;
height: 48px;
}
This screenshot shows the background behind the left arrow (which is currently moused over, but the screenshot won’t show the cursor)
