Выровнять шрифт и текст слева

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

Просто используйте класс 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

Answer 2

Необходимо установить ширину контейнера для значков в соответствии с шириной самой широкой.

<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