Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

font-awesome

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?

like image 507
musefan Avatar asked Dec 14 '16 10:12

musefan


2 Answers

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

like image 184
MBaas Avatar answered Oct 02 '22 21:10

MBaas


Icon size, some icons are bigger, if you use fa fa-fw, the size of the icon will be the same regardless of how big/small it should be.

like image 37
Ryan James Francisco Indangan Avatar answered Oct 02 '22 20:10

Ryan James Francisco Indangan