Where is the setting to adjust the size of the SVG icons?
Unfortunately I never tested resizing. The width and height controls in the metric section may work. I’ll need to double check as I’m not sure if the new icons have hard coded width and height on the html tags.
1 Like
Is that a difficult thing for your team to configure? Thanks Norm.
And again, neither the color or the stroke setting are working for me in the SVG panel in the class editor.
Could you share a screen shot of the class editor ( svg settings) and the carousel arrow please.
1 Like
Here you go Norm. I colored the fill and stroke bright green and gave a 25px stroke just to easily demonstrate that the arrows were not affected.
Hi @Creative, you’re using the wrong class. You’ll need to replace the class with: .carousel-nav-icon. From there you should fine!
1 Like
Like I mentioned the class name has changed.
1 Like
And it’s clearly visible on the screenshots in this thread.
1 Like
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
1 Like
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!
1 Like
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!
1 Like
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! 
3 Likes
@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.
2 Likes
Awesome it worked!
2 Likes
For anyone who wants to use, attached the complete Blocs file. Code can be found here and Bootstrap icons here.
4 Likes
That’s super cool! - thanks!
2 Likes
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)
