Fixed Width Icons

All Font Awesome Icons are not of the same width and their width is based on the type of icon.

When we use different icons as a prefix to nav list items, the alignment is not proper.

In order to achieve the same width for all such icons, we need to add an additional class fa-fw to each of them as shown below.

Font Awesome library has provided a predefined class fa-fw to make an icon a fixed-width icon, where all fixed-width icons take up the same space on the UI.

<ul>
    <li><i class="fa fa-home fa-fw"> Skating</li>
    <li><i class="fa fa-book fa-fw"> Snowboarding</li>
    <li><i class="fa fa-pencil fa-fw"> Cricket</li>
    <li><i class="fa fa-envelope fa-fw"> Football</li>
</ul>

Examples

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>    
    <h1>Fixed Width Icons</h1>
    <h2>Before</h2>
    <div style="font-size: 40px;">
        <div><i class="fa fa-home" style="background:DodgerBlue"></i> Skating</div>
        <div><i class="fa fa-book" style="background:SkyBlue"></i> Skiing</div>
        <div><i class="fa fa-pencil" style="background:DodgerBlue"></i> Nordic Skiing</div>
        <div><i class="fa fa-cog" style="background:SkyBlue"></i> Snowboarding</div>
        <div><i class="fa fa-envelope" style="background:DodgerBlue"></i> Snowplow</div>
    </div>
    <h2>After</h2>
    <div style="font-size: 40px;">
        <div><i class="fa fa-home fa-fw" style="background:DodgerBlue"></i> Skating</div>
        <div><i class="fa fa-book fa-fw" style="background:SkyBlue"></i> Skiing</div>
        <div><i class="fa fa-pencil fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
        <div><i class="fa fa-cog fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
        <div><i class="fa fa-envelope fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
    </div>
</body>
</html>

Overall

Make sure to use the additional class fa-fw to maintain icon alignment when we are using them in the nav list.

Related Links