如何修改Bootstrap 5手风琴的默认SVG图标为加减圆圈自定义图标

• 你之前编写的SVG代码结构错误：d属性是标签的专属属性，不能直接挂载在
• 没有覆盖默认的旋转属性，展开时原有transform: rotate(-180deg)会导致图标显示异常

方案1：内联SVG背景图方案（无需额外引入字体） #

直接修正后的CSS代码如下：

/* 折叠状态：显示加号圆圈图标 */
.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right: 0.5em;
    /* 清除默认旋转效果 */
    transform: rotate(0) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

/* 展开状态：显示减号圆圈图标 */
.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 d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

方案2：字体图标方案（项目已引入Bootstrap Icons字体时使用，灵活度更高） #

.accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right: 0.5em;
    /* 清空默认背景图 */
    background-image: none !important;
    /* 配置Bootstrap Icons字体 */
    font-family: "bootstrap-icons" !important;
    content: "\f4fa"; 
    transform: rotate(0) !important;
    width: auto;
    height: auto;
}

.accordion-button:not(.collapsed)::after {
    content: "\f4f7";
    color: #0c63e4;
}

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