Bulma and Fontawesome：如何在垂直和水平方向对齐图标？

Question

我最近开始尝试对布尔玛（Bulma）和丰塔维索（Fontawesome）进行试验，但发现将图标垂直和水平对齐比较棘手。我的情况如下。

1. 我通过npm下载了布尔玛：npm i bulma --save-dev;
2. 我按照Bulma Docs：<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>；
导入了相关的Fontawesome文件。
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

我找到并应用了一个有效的解决方案，只需将CSS文件中的span元素作为目标并将其设置为flex容器即可：

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