如何修改Bootstrap轮播组件上一页/下一页图标线条粗细

问题描述 #

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

我并非想修改按钮的高度或宽度，而是图标的线条粗细，请问有什么方法可以实现？

解决方法 #

Bootstrap默认的轮播控件图标是通过background-image加载的SVG文件，不是用边框（border）实现的，所以你设置border-width完全不会生效。这里给你两种适合新手的实现方式：

方法1：自定义SVG替换默认背景 #

Bootstrap的箭头图标是内嵌的SVG，你可以修改SVG里的线条宽度属性，然后替换掉默认的背景图：

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z' stroke-width='3'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' stroke-width='3'/%3e%3c/svg%3e");
}

你可以调整stroke-width的值来改变线条粗细（比如改成2、4），fill='%23fff'是图标颜色，也可以按需修改。

方法2：用CSS伪元素直接画箭头（更简单直观） #

放弃默认的SVG图标，直接用伪元素绘制自定义粗细的箭头：

/* 先隐藏默认的SVG图标 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
}

/* 绘制上一页箭头 */
.carousel-control-prev-icon::after {
    content: '<';
    font-size: 30px;
    font-weight: 900; /* 这里的font-weight直接控制箭头线条粗细 */
    color: #fff;
}

/* 绘制下一页箭头 */
.carousel-control-next-icon::after {
    content: '>';
    font-size: 30px;
    font-weight: 900;
    color: #fff;
}

这种方法上手更快，调整font-weight就能改变粗细，font-size控制图标大小，color调整颜色，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Mitsun0bu