Question

我试图将我的图标和文字对齐到左边，但看起来有点凌乱

我的代码非常简单：

<p class="text-muted mb-2 text-left">22/8 <i class="fa fa-calendar-alt fa-1x"></i>
<br>21:00 <i class="fa fa-clock fa-1x"></i>
<br>Herzeliya <i class="fa fa-map-marker-alt fa-1x"></i>
<br>Texy <i class="fa fa-home fa-1x"></i>
<br>

有人可以帮我直接对齐吗？

Answer 1

必须根据最宽的宽度设置图标的容器宽度。

<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <p class="text-muted mb-2 text-left">
                <i class="fa fa-calendar-alt fa-1x fa-custom-width mr-2"></i>22/8
                <br>
                <i class="fa fa-clock fa-1x fa-custom-width mr-2"></i>21:00
                <br>
                <i class="fa fa-map-marker-alt fa-1x fa-custom-width mr-2"></i>Herzeliya
                <br>
                <i class="fa fa-home fa-1x fa-custom-width mr-2"></i>Texy
                <br>
            </p>
        </div>
    </div>
</div>

.fa-custom-width{
    width: 18px;
    text-align: center;
}

https://www.codeply.com/go/GQAdPupsFU

Answer 2

只需使用fa-fw类（包含在Font Awesome中）......

<p class="text-muted mb-2 text-left">
       <i class="fa fa-fw fa-calendar-alt fa-1x"></i> 22/8
       <br><i class="fa fa-fw fa-clock fa-1x"></i> 21:00
       <br><i class="fa fa-fw fa-map-marker-alt fa-1x"></i> Herzeliya
       <br><i class="fa fa-fw fa-home fa-1x"></i> Texy
       <br>
</p>

https://www.codeply.com/go/ouYds9p7kc

将字体对齐和文本左对齐

2 个答案: