如何修改Bootstrap 4 Carousel控件颜色？可替换为Font Awesome图标

我刚好处理过类似的需求，用Font Awesome替换Bootstrap轮播的默认SVG控件其实很简单，既能解决白色背景下控件颜色不显眼的问题，还能和你网站其他元素的图标风格统一。跟着下面的步骤来就行：

1. 修改轮播控件的HTML结构 #

找到你轮播代码里的「上一张」和「下一张」按钮，把默认的SVG图标容器（<span class="carousel-control-prev-icon">/<span class="carousel-control-next-icon">）替换成Font Awesome的图标标签，同时保留原来的图标类名来维持默认布局：

<!-- 上一张按钮 -->
<a class="carousel-control-prev" href="#your-carousel-id" role="button" data-slide="prev">
  <i class="fas fa-chevron-left carousel-control-prev-icon" aria-hidden="true"></i>
  <span class="sr-only">Previous</span>
</a>

<!-- 下一张按钮 -->
<a class="carousel-control-next" href="#your-carousel-id" role="button" data-slide="next">
  <i class="fas fa-chevron-right carousel-control-next-icon" aria-hidden="true"></i>
  <span class="sr-only">Next</span>
</a>

注意：这里用fa-chevron-left和fa-chevron-right更贴合原控件的左右箭头样式，如果你偏好fa-chevrons也可以替换，调整下字体大小就行

2. 用CSS覆盖默认样式 #

Bootstrap默认给控件图标设置了SVG背景图，我们需要移除这个背景，同时调整Font Awesome图标的颜色、大小，让它和原控件的表现一致：

/* 移除默认的SVG背景图 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
}

/* 设置图标的颜色和大小，适配白色背景 */
.carousel-control-prev-icon i,
.carousel-control-next-icon i {
  color: #333; /* 这里改成你想要的颜色，比如深灰色，和白色背景形成对比 */
  font-size: 2rem; /* 这个大小和Bootstrap默认SVG图标差不多，可按需调整 */
}

/* 保留hover交互效果，和Bootstrap默认逻辑一致 */
.carousel-control-prev:hover i,
.carousel-control-next:hover i {
  color: #000; /* hover时的颜色，可自定义 */
}

3. 验证效果 #

刷新页面后，你会看到轮播控件已经换成了Font Awesome的箭头图标，颜色可以自由修改，而且位置、大小和原来的SVG控件完全一致，hover效果也正常生效。这样既解决了SVG颜色无法直接修改的问题，还能和你网站其他Font Awesome图标保持风格统一。

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