28

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?

3 Answers 3

38

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

1
  • 3
    Hmmm... I can't believe I completely missed that "Fixed Width Icons" section in the exact same page I linked in my question! my bad...
    – musefan
    Dec 14, 2016 at 15:37
4

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.

1

fa-fw class will align icons vertically center with fixed margin. so the size of each icon will not vary and they aligned below each other in the center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.