Как отцентрировать текст по вертикали?
Span:before дать vertical-align:middle;
<label title="добавить товар в сравнение">
  <input class="compare" type="checkbox" data-id="199">
  <span class="compareLabel">
  <i class="fa fa-circle-o" aria-hidden="true"></i>
  Сравнить
</span>
</label>input[type=checkbox] {
    display: none;
}

.compareLabel {
    color: #98a4a7;
    font-weight: normal;
    font-size:14px;
    line-height: 24px;
    vertical-align: top;
    display: inline-block;
}

.compareLabel i {
    line-height: 24px;
    font-size: 24px;
    vertical-align: top;
    display: inline-block;
}