3 ms·
Another good approach to small elements like these is using icon fonts. For example, GitHub recently changed all of their nav icons from sprites to a custom ico
by harlanlewis 14y ago
Another good approach to small elements like these is using icon fonts. For example, GitHub recently changed all of their nav icons from sprites to a custom icon font called Octicons:
Say Hello to Octicons: https://github.com/blog/1106-say-hello-to-octicons https://github.com/blog/1106-say-hello-to-octicons
The Making of Octicons: https://github.com/blog/1135-the-making-of-octicons https://github.com/blog/1135-the-making-of-octicons
Edit: I realize icon fonts are mentioned in the Smashing Mag article, but GitHub's articles are considerably more thorough.
- jlgreco 14y agoIcon fonts just seem to like such a hack to me in a world where SVG exists. Is the entire idea behind using them just that IE 7/8 doesn't have SVG support? How did lack of SVG support even happen? SVG seems like something any modern browser should have had for years.
- yusefnapora 14y agoAndroid also lacked SVG support until 3.2. The justification I read was that they deliberately disabled it from their webkit build to save 1MB in the compiled binary. Sad, especially since pre-ICS phones are by far the most prevalent.
- justincormack 14y agoAlthough a low Res image fallback is OK there.
- msbarnett 14y agoYou can hint a font. You can't hint an SVG.
- jlgreco 14y agoHuh, that is unfortunate. Is hinting still important on devices with such high DPI though?
- Chris_Newton 14y agoIt’s not usually the high-dpi devices that you’d be adding hints for. The point is that anything that is going to replace today’s pixel-perfect bitmap graphics still has to look pixel-perfect when rendered on lower-dpi devices, which is going to remain by far the majority of visitors to most sites for a while yet.
- mgcross 14y agoI would love to use SVG, but support just isn't robust enough. Hard to deal with hover/active states too. Icon fonts are one request and easy to style with CSS color and text-shadow (even simulating glows). I just wish there was an easy way to generate a small font set from a the handful of vector elements I need for a given website (custom elements, that is, not using a service like Pictos).
- sopooneo 14y agoI believe IE was trying to push the roughly equivalent VML format.
- mgcross 14y agoNice, I love that they created a large and small version so that the details weren't interpolated away when down sampled. The 'making of' is great, I'm going to forward this to our designers.