css - bool 玛和 Fontawesome : How to align icons vertically and horizontally?

Question

我最近开始尝试使用 Bulma 和 Fontawesome，我发现很难垂直和水平对齐图标。我的情况如下。

1. 我通过 npm 下载了 Bulma:npm i bulma --save-dev ;
2. 我根据 Bulma Docs 导入了相关的 Fontawesome 文件: <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

我找到并应用了一个可行的解决方案，只需将我的 CSS 文件中的 span 元素作为目标并将其设为 flex-container:

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