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

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

fa-fw

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

fa-fw

3 Answers
3

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 :-)

fw

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.

Here is an exmaple of a use case

make icons in menu centered
you could use

display: block;
width: 2rem;
text-align: center;


screenshot:

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy