html 如何修改Bootstrap carousel下一个/上一个图标厚度

1yjd4xko  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(91)

我开始学习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;
}

但这没有效果。只是要明确,我不是试图改变按钮的高度/宽度,而是厚度。你有什么想法,我怎么能做到这一点?
谢谢大家!

ig9co6j1

ig9co6j11#

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数据(https://getbootstrap.com/docs/5.2/components/carousel/)重新定义$carousel-control-prev-icon-bg$carousel-control-next-icon-bg变量

相关问题