如何修改Bootstrap轮播滑块按钮的颜色

Bootstrap 5的轮播控制按钮（上一个/下一个）默认使用白色图标，你可以通过以下几种简单方法修改其颜色：

方法1：覆盖内置CSS变量（推荐） #

Bootstrap 5为轮播控制图标定义了专用CSS变量，直接覆盖即可快速修改颜色，同时保留原有的hover交互效果：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  --bs-carousel-control-color: #ff4500; /* 替换为你需要的颜色值，支持十六进制、RGB等格式 */
}

方法2：使用CSS滤镜调整颜色 #

如果需要更灵活的色调调整，可通过filter属性修改图标颜色，比如将默认白色转为深红色：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(30%) sepia(100%) saturate(5000%) hue-rotate(340deg);
}

你可以调整滤镜参数来匹配目标颜色，在线滤镜生成工具能帮你快速获取对应代码。

方法3：自定义背景图标 #

若需要完全替换图标样式，可直接修改按钮的背景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='%23ff4500'%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'/%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='%23ff4500'%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'/%3e%3c/svg%3e");
}

将代码中的%23ff4500替换为目标颜色的十六进制值（%23是#的URL编码）即可。

完整示例代码 #

注意：原代码中三个轮播项都添加了active类，这会导致轮播无法正常切换，需改为仅第一个项保留active：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* 使用方法1修改颜色 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  --bs-carousel-control-color: #ff4500;
}
</style>
<div class="col-lg-8 col-md-12 col-sm-12">
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" 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="#carouselExampleAutoplaying" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

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