Добавьте значок font awesome в выноску Bootstrap 4

Question

Я пытаюсь добавить значок слева от выноски Bootstrap 4, но он отображается над H4.

Я хочу, чтобы он был слева, а затем сообщение. Я также пробовал использовать его как .p: last-child, но он не отражает.

Это разметка

<div class="callout callout-danger" *ngIf="!isMarked">
   <i class="fal fa-sensor-alert fa-2x mr-2"></i>
   <h4>{{childName }} is currently NOT marked.</h4>
   Mark now.
</div>

и ccs для выноски, как показано ниже:

.callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}

.callout .h4 {
  margin-top: 0;
  margin-bottom: 5px;
  padding-left:20px;
}

.callout .p:last-child {
   margin-bottom: 0;
}

.callout .code {
   border-radius: 3px;
}

.callout .bs-callout {
   margin-top: -5px;
}

.callout-success {
   border-left-color: #5cb85c;
}

.callout-danger {
  border-left-color: #d9534f;
}

Answer 1

Редактировать: попробуйте использовать сетку, чтобы поместить значок, h4 и тело рядом

<div class="container">
  <div class="row">

    ...

    <div class="col-1"><i class="fal fa-sensor-alert fa-2x mr-2"></i></div>
    <div class="col-11"><h4> {{childName }} is currently NOT marked.</h4>Mark now.</div>

    ...

  </div>  
</div>