2

I recently noticed some major website (like this one) do not use font-awesome or similar projects to display their icons. Rather they use PNGs.

Any rationale for this? Does it make any difference in terms of compatibility?

Would it make sense to no longer use font-awesome as a font and convert the icons to PNG/SVG (e.g. using https://github.com/encharm/Font-Awesome-SVG-PNG)?

  • just fyi, the fonts won't work for those who have javascript disabled – aexl Oct 7 '15 at 20:54
  • PNGs for most purposes are less effort and possibly more robust for old browsers, but there can be issues where they don't scale smoothly and look grainy, particularly in some IE versions. – Paul Kienitz Oct 8 '15 at 12:22
3

One major advantage of using PNGs is showing icons with more than one color. Also it's well supported by older browsers, althrough the IE 6 will have problems with transparent PNGs.

You might want to check font icons vs png icons on StackOverflow for a good comparison.

1

png can be merged (all your site's png in one big png) to optimise the size. there is tool like compass (http://compass-style.org/) who automatize this functionnality. Then images are called with image position to display desired image on desired style. For exemple i used 600ko icons, and when it is merged it does 111ko, and if you use browser cache, only one item need to be cached for the whole site.

example: http://compass-style.org/help/tutorials/spriting/

  • This is not an advantage over fonts, since fonts can hold all the 'images' in one file too. – DisgruntledGoat Nov 1 '15 at 0:42
  • really ? can you post us the size for just one font ? – Froggiz Nov 1 '15 at 8:04
  • thanks for the -1 vote, you can't admit your error ? size of fonts is > to optimized png... – Froggiz Nov 2 '15 at 10:10
  • What error? I never said anything about size. You said that combining images into one file is an advantage over fonts, but that's exactly what fonts are - lots of 'images' in one. – DisgruntledGoat Nov 2 '15 at 12:23
  • you said it is not an avantages, but it is because pngs are lighter than fonts. So you made me -1 saying an error ... it is not your fake 17k points making you untouchable. – Froggiz Nov 2 '15 at 12:53
0

I don't see why one should start using png in 2015. I'd rather say major websites are usually not the first ones to go for new technologies, simply because they have large codebases!

I'd say png, even in sprite form is not a good option anymore. Because you need different sizes for different display sizes. Vector format, wheter svg or font implementations make your life so easier as you know same graphics can be shown on any device sizes sharp and crisp!

  • fonts won't work when javascript is disabled, and pngs will – aexl Oct 7 '15 at 20:53
  • @TheSexiestManinJamaica You don't need JS to load fonts. – DisgruntledGoat Nov 2 '15 at 12:58

Your Answer

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

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