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

Improve this question
2
  • just fyi, the fonts won't work for those who have javascript disabled
    – ᴍᴇʜᴏᴠ
    Oct 7, 2015 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, 2015 at 12:22

3 Answers 3

Reset to default
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.

Improve this answer
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/

Improve this answer
9
  • This is not an advantage over fonts, since fonts can hold all the 'images' in one file too.
    – DisgruntledGoat
    Nov 1, 2015 at 0:42
  • really ? can you post us the size for just one font ?
    – Froggiz
    Nov 1, 2015 at 8:04
  • thanks for the -1 vote, you can't admit your error ? size of fonts is > to optimized png...
    – Froggiz
    Nov 2, 2015 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, 2015 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, 2015 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!

Improve this answer
2
  • fonts won't work when javascript is disabled, and pngs will
    – ᴍᴇʜᴏᴠ
    Oct 7, 2015 at 20:53
  • @TheSexiestManinJamaica You don't need JS to load fonts.
    – DisgruntledGoat
    Nov 2, 2015 at 12:58

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.