What is the purpose of the `fa-fw` class?

font-awesome
musefan picture musefan · Dec 14, 2016 · Viewed 18.4k times · Source

Looking through the examples on the fontawesome website, I notice a few make use of the class fa-fw. For example:

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

I have tried with and without it and I cannot see any notable difference.

What is the purpose of the fa-fw class?

Answer

MBaas picture MBaas · Dec 14, 2016

Fixed Width Icons

I've opened the sample page in Chrome, opened inspector on the "Library"-Element of the fw-sample and removed the fw-class. This messes up the icon-alignment - and that is also mentioned as the purpose of fw: ensuring proper alignment of the icons :-)

enter image description here

Related questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
Use Font Awesome Icons in CSS

I have some CSS that looks like this: #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } I would like to replace the image with an icon from Font Awesome. I do not see anyway to use the icon in …

Read More