Я добавляю раздел часто задаваемых вопросов на свой веб-сайт (пока не живу, поэтому нет ссылки).У меня есть некоторые незначительные проблемы с 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 строки / строки.
Спасибо!