Icon fonts blurred depending on browser width position

I’m having an issue getting the icons from a custom icon font appearing crisp in the website (and in Rapidweaverr preview). Sometimes they are rendered crisp other times they don’t depending on the position of the webpage when you adjust the browser width. I already remade the icons and checked the code a bunch of times but i still have no idea how to fix this. Anybody have an idea of what could be the cause of have dealt with this?

I’m almost giving up and thinking in replacing everything with PNG’s.


After some research seems the cause is due to some paddings/margins being defined as percentages on some stacks.

It might help to provide us with a link to the page in question. We can’t see what’s on your computer screen!

There are many different font icon libraries available.

Font icons are nearly always sharper than traditional graphic icons. Hence their formidable rise in popularity with web designers and developers in recent years - especially with the growth in high resolution displays.

However there are many possible factors that might cause font icons to loose clarity. Animation effects on pages can sometimes effect anti-alisaing. Likewise CSS code used for creating special text shadow, gradient or embossed effects can have a detrimental effect on icons. And there’s possibly a dozen or more other things that might make icons go blurry.