They are like many icon fonts designed to sit nicely in text, not to sit nicely in a circle. So I’m afraid I have no solution for perfectly aligning font icons to a container – unless you want to do it icon by icon… no thanks. But I’ll give to the best CSS I’ve found to do an ok job.
In that case you may ask why use them? Because they are great. The sacrifice of perfectly aligned icons brings good rewards. They look great on retina, look great at any size, a massive selection of icons and all with a really low file size and one server call. With 4k/retina monitors becoming more and more popular and page speed affecting google page rank these are important factors!
The need for perfection I think is part of a wider misunderstanding of the web. Often folks are looking to make a website pixel perfect in general – I get that, I really do. I too have the drive to make a website look identical in every browser and to match the photoshop mockup pixel to pixel and align icons to pixel perfection. But the web just doesn’t work like photoshop and honestly, it doesn’t need to. A website should be useable, readable, be nice on the eye and function correctly. The need for perfection is a personal thing – not one that serves an important purpose on the web.
So let’s align the icons the best we can and reap the benefits of a fast loading website with sharp icons at any size and a massive repository of icons to choose from. And try to not get too tied up with trying to achieve a pixel perfect web.
So here’s the best CSS I’ve found
Here is a good fiddle by tagliala given on a github answer. This provides the best solution I have found to centering the icons without extra markup – I’ve look through a lot.
If you’re looking for a rounded circle or square that’s filled in, you can use font awesome’s stacking feature: