如何修改ng-bootstrap Carousel箭头颜色或图标（Bootstrap4+Angular）

我明白你碰到的麻烦了——白色背景里默认的白色箭头完全没辨识度，而且在SCSS里好像找不到正确的元素下手。其实原因很简单：ng-bootstrap的Carousel箭头并不是span里的文字或内嵌图标，而是通过.carousel-control-prev-icon和.carousel-control-next-icon这两个类的background-image属性加载的白色SVG图标，所以直接选span肯定无效~

给你几个实用的解决方案，按操作简便程度排序：

方案1：用CSS Filter快速反转颜色 #

这是最省事的方法，不需要替换图标，直接把白色箭头反转成黑色：

/* 给你的Carousel外层加个自定义类（比如.white-bg-carousel），用来提高样式优先级，避免被默认样式覆盖 */
.white-bg-carousel .carousel-control-prev-icon,
.white-bg-carousel .carousel-control-next-icon {
  filter: invert(1); /* 一键反转颜色，白色直接变黑色 */
}

如果还是被默认样式覆盖，可以再提升选择器的特异性，比如加上Carousel的ID或者更外层的容器类。

方案2：替换为黑色SVG图标 #

如果你想直接控制图标的颜色细节，可以把background-image替换成黑色版本的SVG（把原SVG里的fill=%23fff改成fill=%23000即可）：

.white-bg-carousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.white-bg-carousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

这个逻辑和你在浏览器控制台修改URL生效的原理完全一致，只是把配置移到SCSS里而已。

补充：为什么之前选不中元素？ #

你看到的箭头其实是.carousel-control-prev-icon这个span的背景图，不是span内部的元素，所以直接选span或者父元素都没法修改颜色——必须精准选中这两个-icon类的元素，才能修改它们的背景图或滤镜样式。

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