如何在Bootstrap 4折叠面板箭头旁添加并排图标？

方法一：纯CSS伪元素实现（无需修改HTML） #

利用CSS的:before伪元素添加第二个图标，调整位置让它和原有箭头并排显示。修改后的CSS如下：

.card-header-title > a {
    display: block;
    position: relative;
    padding-right: 40px; /* 为两个图标预留右侧空间，避免文字重叠 */
}
.card-header-title > a:hover {
    cursor: pointer;
}
/* 新增的左侧图标，可替换为你需要的Font Awesome编码 */
.card-header-title > a:before {
    content: "\f013"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 25px; /* 调整位置，让它在箭头左侧 */
}
/* 原有的折叠箭头 */
.card-header-title > a:after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
}
.card-header-title > a[aria-expanded="true"]:after {
    content: "\f077"; /* fa-chevron-up */
}

方法二：HTML插入图标元素（结构更直观） #

直接在折叠链接中添加Font Awesome图标，配合Bootstrap的flex布局类实现并排效果：

修改后的HTML：

<div class="accordion" id="accordionExample">
<div class="card mb-3">
    <div class="card-header" id="heading-1">
         <h5 class="mb-0 card-header-title"> 
            <a class="btn btn-link text-left collapsed d-flex justify-content-between align-items-center" role="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1"> 
              Item 3 
              <div class="d-flex align-items-center">
                <i class="fas fa-cog mr-2"></i> <!-- 替换为你需要的图标，mr-2控制图标和箭头的间距 -->
                <i class="accordion-arrow"></i> <!-- 承载折叠箭头的容器 -->
              </div>
            </a> 
         </h5>
    </div>
    <div id="collapse-1" class="collapse" data-parent="#accordionExample" aria-labelledby="heading-1">
        <div class="card-body"> 
            Description 1 
        </div>
    </div>
</div>
</div>

修改后的CSS：

.card-header-title > a {
    display: block;
}
.card-header-title > a:hover {
    cursor: pointer;
}
/* 控制折叠箭头的切换 */
.accordion-arrow:after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
a[aria-expanded="true"] .accordion-arrow:after {
    content: "\f077"; /* fa-chevron-up */
}

两种方法任选其一即可：第一种适合不想改动HTML结构的场景，第二种结构清晰，更容易调整图标样式和间距。

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