How to modify Bootstrap carousel next/prev icons Thickness-CodePudding

I'm starting to learn HTML/CSS and Bootstrap.

I have a carousel with the following next/prev buttons :

<button  type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
   <span  aria-hidden="true"></span>
   <span > Previous </span>
</button>

<button  type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
   <span  aria-hidden="true"></span>
   <span > Next </span>
</button>

I would like to change the thickness of the buttons so I tried to add this code in my CSS stylesheet :

.carousel-control-prev {
    border-width: 35px;
}

.carousel-control-next {
    border-width: 35px;
}

I also tried :

.carousel-control-prev-icon {
    border-width: 35px;
}

.carousel-control-next-icon {
    border-width: 35px;
}

But this has no effect. Just to be clear, I am not trying to change the height/width of the buttons but the thickness. Do you have any idea how I could achieve this ?

Thank you !

CodePudding user response：

Bootstrap v5 uses a pre-defined set of icons (https://getbootstrap.com/docs/5.2/extend/icons/). In earlier versions, it has been Glyphicons (https://getbootstrap.com/docs/3.3/components/). You may change the referenced icon within the set (if one suits you), the icon set itself (to e.g. Font Awesome, Material Design Icons, ...) or, if ambitious enough, create an own icon for that purpose that you link in with CSS.

According to the Bootstrap Manual you may also re-define the $carousel-control-prev-icon-bg and $carousel-control-next-icon-bg variables with whatever SVG data you prefer (https://getbootstrap.com/docs/5.2/components/carousel/)