Bootstrap - Align text and icons on sidebar - html

Question

As we can see in the sidebar the icons are aligned left, but the text not.
So the question is: How can i align the icons and the text?
Example code is
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<i class="fa fa-bell"></i> {{'notifications' | translate}}
</a>
</li>
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/analitica-avanzada/grafica']">
<i class="fas fa-chart-line"></i> {{'advance-analytics' | translate}}
</a>
</li>

Answer 1

You are using FontAwesome in your example.
FontAwesome 5+ itself shows the solution:
Just use "fa-fw" in the icons-class.
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>

Answer 2

you should have the same width for all the icons, so in your css you can do something like:
i{
width: 12px;
margin-right: 4px;
}
Please change the values according your needs.

Answer 3

The best way is wrap the fontawesome <i> tag using another <span> tag, and apply a min-width value.
HTML
<li [routerLinkActive]=" ['active']" [routerLinkActiveOptions]="{exact:true}">
<a [routerLink]="['/notificaciones/listado']">
<span class="fa-icon">
<i class="fa fa-bell"></i>
</span>
{{'notifications' | translate}}
</a>
</li>
CSS
.fa-icon {
display: inline-flex;
min-width: 20px;
justify-content: flex-start;
}