我们如何在 Bootstrap 网格中将 FA 图标居中？

Question

我正在使用 Bootstrap 网格系统在小网格中显示一些 FA 图标。我一直试图使它们水平均匀对齐但无济于事，这是它们目前的样子：

请看下面我的代码：

<div class="col-sm col-md-4 text-center">
    <span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
    <div class="col-sm col-md-12 block-center" style="margin-top: 10px;">
        <div class="col-sm-3"><i class="fa fa-info"></i></div>
        <div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
        <div class="col-sm-3"><i class="fa fa-question"></i></div>
        <div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-lock"></i></div>
        <div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
        <div class="col-sm-3"><i class="fa fa-power-off"></i></div>
        <div class="col-sm-3"><i class="fa fa-play"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-tint"></i></div>
        <div class="col-sm-3"><i class="fa fa-ban"></i></div>
        <div class="col-sm-3"><i class="fa fa-cogs"></i></div>
        <div class="col-sm-3"><i class="fa fa-bolt"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
        <div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
        <div class="col-sm-3"><i class="fa fa-gear"></i></div>
        <div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
    </div>
    <div class="col-sm col-md-12">
        <div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
        <div class="col-sm-3"><i class="fa fa-pause"></i></div>
        <div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
        <div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
    </div>
</div>

Answer 1

尝试添加 fa-fw class。它将图标宽度设置为相同的固定宽度。您可以在文档中阅读更多内容 https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Answer 2

您应该将内部列 (col-sm-3) 放在一行中，以便它们正常运行。

像这样：

<div class="col-sm col-md-4 text-center">
        <span class="info-box-text"><input type="text" class="form-control" placeholder="Name this icon..." style="text-align: center;"/></span>
        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-3"><i class="fa fa-info"></i></div>
            <div class="col-sm-3"><i class="fa fa-crosshairs"></i></div>
            <div class="col-sm-3"><i class="fa fa-question"></i></div>
            <div class="col-sm-3"><i class="fa fa-flag-o"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-lock"></i></div>
            <div class="col-sm-3"><i class="fa fa-tachometer"></i></div>
            <div class="col-sm-3"><i class="fa fa-power-off"></i></div>
            <div class="col-sm-3"><i class="fa fa-play"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-tint"></i></div>
            <div class="col-sm-3"><i class="fa fa-ban"></i></div>
            <div class="col-sm-3"><i class="fa fa-cogs"></i></div>
            <div class="col-sm-3"><i class="fa fa-bolt"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-heart-o"></i></div>
            <div class="col-sm-3"><i class="fa fa-stethoscope"></i></div>
            <div class="col-sm-3"><i class="fa fa-gear"></i></div>
            <div class="col-sm-3"><i class="fa fa-arrow-up"></i></div>
        </div>
        <div class="row">
            <div class="col-sm-3"><i class="fa fa-arrow-down"></i></div>
            <div class="col-sm-3"><i class="fa fa-pause"></i></div>
            <div class="col-sm-3"><i class="fa fa-exclamation"></i></div>
            <div class="col-sm-3"><i class="fa fa-asterisk"></i></div>
        </div>
    </div>

列在其他列中的行为不正常，最好使用 Row->col->row->col 格式。

我们如何在 Bootstrap 网格中将 FA 图标居中？

How can we center FA Icons within a Boostrap grid?

font-awesome

twitter-bootstrap-3