Font Awesome V4 - Fixed Width Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to create fixed-width icons using the additional class fa-fw, which comes in handy in generating icons of the same width.

Run this on IDE

<!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

This example helps us understand different ways to change the icon styles of Font Awesome Icons.

Related Links