如何将折叠图标移至文本左侧？当前图标位于右侧

要把折叠图标移到文本左侧，只需完成以下两步操作：

1. 调整HTML结构，将图标标签移至文本前方 #

把原代码中<i class="chevron fa fa-fw"></i>的位置从文本后方挪到前方，示例代码如下：

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">
        <i class="chevron fa fa-fw"></i> Products 1
    </div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems2">
        <i class="chevron fa fa-fw"></i> Products 2
    </div>
    <div class="collapse" id="collapseOrderItems2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

2. 优化CSS，调整图标与文本的排版细节 #

原CSS仅负责图标的切换逻辑，可新增样式让图标与文本的排版更协调：

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054"; 
}
/* 新增样式：调整图标与文本的间距，确保垂直对齐 */
.panel-heading .chevron {
    margin-right: 8px;
    vertical-align: middle;
}

修改完成后，折叠图标会固定在文本左侧，折叠/展开功能不受影响，整体排版也更美观。

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