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

【问题标题】：Change color of Bootstrap 5 accordion button open icon (up chevron)更改 Bootstrap 5 手风琴按钮打开图标的颜色（向上 V 形）
【发布时间】：2021-05-22 08:24:43
【问题描述】：

在this excellent answer 之后，我能够更改 Bootstrap 5 的 down-chevron svg 的填充颜色（呈现为背景图像。我现在正在尝试查找 up-chevron（打开图标）的 url，所以我可以改变它的填充颜色。但我找不到它。

检查Bootstrap example 和我自己的代码的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;
}

【问题讨论】：

请在问题中也贴出相关代码

标签： css bootstrap-5

【解决方案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" 之后）。我查看了source file 并在那里找到了它。

希望它可以帮助一些人。

【讨论】：