html - CSS，FAQ Accordion 图标文本水平对齐

Question

HTML

<div class="panel ">
          <div class="accordion-toggle question-toggle" data-toggle="collapse" data-parent"#faqaccordion"="data-parent" #faqaccordion""="#faqAccordion" "" data-target="#question5">
            <h4 class="panel-title collapsed" data-toggle="collapse" data-target="#question5">
              <a href="#" class="ing">Für welche Banken und Unternehmen ist der Bonitätsscore wichtig?</a>
            </h4>
          </div>
          <div id="question5" class="panel-collapse collapse" >
            <div class="panel-body">
              <p>[Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit][1] 
              </p>
            </div>
          </div>
        </div>

CSS

.vr-box-section {
  @include mq-xsm {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.container {
  @include mq-xsm {
    padding-left: 0;
    padding-right: 0;
  }
}

.panel {
  border-width: 0;
  box-shadow: none;
  padding-bottom: 16px;
}

.panel-group {
  padding-top: 24px;
}

.panel-heading {
  cursor: pointer;
}

a.ing:hover {
  color: #0066B3;
}

a.support {
  color: black;
  text-decoration: underline;
}

.vr-box-section {
  padding-left: 16px;
  padding-right: 16px;
}

.panel-title:after {
  font-family: 'Glyphicons Halflings';
  content: "\e113";
  float: left;
  color: black;
  -webkit-text-stroke: 0.2px white;
  padding-right: 8px;
}

.panel-title.collapsed:after {
  content: "\e114";
}

我正在尝试在左侧实现一个带有上/下切换图标的 FAQ 下拉菜单。当我在小型设备上测试页面时，文本看起来像是与图标重叠。所以我想将箭头和文本定位在同一行，这样我看起来就会对齐并且可以避免重叠。谢谢

SCREENSHOT

Answer 1

如果我真正理解了这个问题，这可能会有所帮助:

.panel-title {
   display: flex;
 }