更改 Bootstrap 5 手风琴按钮打开图标的颜色（向上 V 形）

Question

遵循这个出色的答案，我能够更改 Bootstrap 5 的 down-chevron svg（呈现为背景图像）的填充颜色。我现在正在尝试找到 up-chevron（打开图标）的 url，以便我可以更改其填充颜​​色。但我找不到它。

检查Bootstrap 示例和我自己的代码的 html ，我只看到“向下”折叠的背景图像和右侧灰色方块中替换的“向上”图像。我在 CSS 中尝试过的任何方法都没有成功地定位该替换图像。

以下是适用于向下图标的代码，然后是我针对向上图标所做的努力。（我用来background-color:yellow查看选择器是否正常工作。）

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button.collapse a:link.active,
.accordion-button-active-collapse ::after,
button.accordion-button-active::after.active {
    background-color: yellow;
}

Answer 1

正确的CSS是这样的：

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg)
}

要更改图标颜色，只需更改 svg 的填充（位于“%23”之后）。我查看了源文件并在那里找到了它。

希望它能帮助一些人。