如何在Bootstrap面板中拆分“标题”和“图标”？

Question

我在我的网站上添加了一个FAQ部分（尚未上线，因此没有链接）。我有一些无法解决的小CSS问题。我有一个看起来像这样的面板：

问题1：
-不能将图标和文字分开（见图）。标题可以长也可以短。
-当标题较长且具有多行（行）时，该图标未居中，该图标仅向下显示。 （参见图片）

我如何将标题分为2部分，其中1部分以高度和宽度（图标）为中心。谢谢

.btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                <h4 class="panel-title">testtesttesttesttesttest<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="whoweare3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                <h4 class="panel-title">testtesttesttesttesttesttesttesttestesttes ttesttestt<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="contactus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold">
                <h4 class="panel-title">test<i class="fa fa-chevron-right pull-left"></i></h4>
            </div>
            <div id="cold" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
    </div>
</div>

更新后的答案：

该问题现已解决，但仍然存在一些小问题：
 -标题和图标现已划分，但我需要为图标留出更多空间。
 -图标仍会下降一些px，标题长度超过1行/行。

谢谢！

Answer 1

我使用flex的解决方案，将icon移到文本前面并设置

.panel-title{
    display: flex;
    align-items: center
}

    .panel-title {
        display: flex;
        align-items: center
    }

    .panel-title > i {
        margin-right: 10px;
    }

    .btn,
    .btn:hover,
    .btn:focus,
    .btn:active,
    .btn:active:focus {
        outline: 0;
    }

    .btn-custom {
        margin-bottom: 1em;
    }

    .no-margin {
        margin: 0;
    }

    .no-padding {
        padding: 0;
    }

    .no-border {
        border: 0;
    }

    .no-radius {
        border-radius: 0;
    }


    /*** Content ***/
    main {}

    .i-row {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .i-row-odd {
        background-color: #ffffff;
    }

    .i-row-even {
        background-color: #f7f7f7;
    }

    .section-title {
        margin-top: 0;
        margin-bottom: 0.6em;
        font-weight: 500;
    }

    .section-title .fa {
        margin-right: 5px;
        color: #6f5499;
    }


    .i-accordion .panel-heading,
    .d-accordion .panel-heading,
    .accordion-2a .panel-heading,
    .accordion-2b .panel-heading,
    .accordion-3 .panel-heading {
        cursor: pointer;
    }

    .d-accordion .panel-heading.collapsed .fa-chevron-up:before {
        content: '\f078';
    }


    .panel-success>.panel-heading {
        background-color: transparent;
        border-color: transparent;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">
<div class="col-md-6">
    <div class="panel-group i-accordion">
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#aboutus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="aboutus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#whoweare3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttest</h4>
            </div>
            <div id="whoweare3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#contactus3">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>testtesttesttesttesttesttesttesttestesttes ttesttestt</h4>
            </div>
            <div id="contactus3" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading" data-toggle="collapse" data-parent=".i-accordion" href="#cold">
                <h4 class="panel-title"><i class="fa fa-chevron-right"></i>test</h4>
            </div>
            <div id="cold" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>answer</p>
                </div>
            </div>
        </div>
    </div>
</div>