Fixed width icons

Why might you want to use fixed-width icons?

  • Better appearance in navigations lists
  • Better appearance in list groups
Think about our previous example:
<span class="fa fa-info fa-5x" style="color:blue"></span> <span class="fa fa-question-circle fa-5x" style="color:green"></span> <span class="fa fa-warning fa-5x" style="color:red"></span>

These icons don't have a problem being used next to each other like this.

But what if they were displayed vertically, perhaps with text following them?

<span class="fa fa-info fa-2x" style="color:blue"></span> Information about...<span class="fa fa-question-circle fa-52" style="color:green"></span> Questions about...<span class="fa fa-warning fa-2x" style="color:red"></span> Warning about...

Information about...

Questions about...

Warning about...

They are not really aligned very well are they?

We can improve this quite easily by adding the fa-fw, which means 'fixed width':


<span class="fa fa-info fa-2x" style="color:blue" fa-fw></span> Information about...<span class="fa fa-question-circle fa-52" style="color:green" fa-fw></span> Questions about...<span class="fa fa-warning fa-2x fa-fw" style="color:red"></span> Warning about...

Information about...

Questions about...

Warning about...

Much better eh?

More Font Awesome fun next month !