Bulma и Fontawesome: Как выровнять значки по вертикали и горизонтали?

Question

Я недавно начал экспериментировать с Булмой и Fontawesome, и мне было сложно выровнять иконки по вертикали и горизонтали. Моя ситуация следующая.

1. Я скачал Bulma через npm: npm i bulma --save-dev;
2. Я импортировал соответствующий файл Fontawesome согласно Bulma Docs : <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>;
3. Создано поле основного элемента ввода со значком слева и другим справа:

<div class="control has-icons-left has-icons-right">
    <input class="input" type="text">
    <span class="icon is-small is-left">
        <i class="fas fa-map-pin"></i>
    </span>
    <span class="icon is-small is-right">
        <i class="fas fa-check"></i>
    </span>
</div>

Это привело к странному выравниванию значков по левому верхнему углу соответствующих позиций. Я попытался отцентрировать их, добавив класс has-text-centered к элементу span, но это не сработало. Есть обходной путь?

Answer 1

Я нашел и применил рабочее решение, просто нацелив элемент span в моем CSS-файле и сделав его флекс-контейнером:

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}