如何修改 Bootstrap carousel next/prev icons Thickness

Question

我开始学习 HTML/CSS 和 Bootstrap。

我有一个带有以下下一个/上一个按钮的轮播：

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

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

我想改变按钮的粗细，所以我尝试在我的 CSS 样式表中添加这段代码：

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

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

我也试过：

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

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

但这没有效果。 需要说明的是，我不是要更改按钮的高度/宽度，而是要更改厚度。 你知道我怎么能做到这一点吗？

谢谢 ！

Answer 1

Bootstrap v5 使用一组预定义的图标 ( https://getbootstrap.com/docs/5.2/extend/icons/ )。 在早期版本中，它是 Glyphicons ( https://getbootstrap.com/docs/3.3/components/ )。 您可以更改集合中引用的图标（如果适合您）、图标集本身（例如 Font Awesome、Material Design Icons 等），或者，如果雄心勃勃，可以为此目的创建自己的图标并链接在 CSS 中。

根据 Bootstrap 手册，您还可以使用您喜欢的任何 SVG 数据重新定义$carousel-control-prev-icon-bg和$carousel-control-next-icon-bg变量（ https://getbootstrap.com/docs /5.2/组件/旋转木马/ ）