5 ms·
Pure CSS GUI icons (experimental)
- dualogy 15y agoLoving this. Unicode has some awesome symbol dingbats (not just arrows, even weather symbols, coffee cups and the likes) for UI icons too but this goes a step further and is more stylish (plus Android fonts don't have most dingbats, not even the arrows -- not sure about iOS).
- drdaeman 15y agoI don't get why this is "awesome". CSS for icons is like HTML tables for markup. You have a path, split it to pieces you can represent with CSS using the methods you consider acceptable and draw a shape using ::before and ::after pseudo-elements. Sure, those icons were carefully hand-crafted. This requires a lot of patient work, and this is admirable. Yet, we have SVG for vector graphics. Embed it with data: URIs (I believe browsers who support CSS3 transforms can display SVG backgrounds) and that's it.
- huckfinnaafb 15y agoI think it's an interesting experiment to explore CSS3 stuff. Some experiments end up impractical, but they're still good to know about. That said, for anyone wondering why they're not practical... Spritesheet image - 9kb [http://imgur.com/Mcr9N](png) CSS needed to write the positions - ~1-3kb Pure CSS - 60kb
- bbatsell 15y agogzip -9 takes the CSS down to 6757 bytes. That's not why it's impractical.
- huckfinnaafb 15y agoYou're right about gzip/deflate! And of course you don't have to use all the icons. So now my argument is probably that of browser compatibility and separation of jobs :)
- sambeau 15y agoGzipped SVG would be a fraction of that. That should be your new argument :)
- catch23 15y agogzip -9 takes the PNG down to 4714 bytes, still smaller than the CSS.
- jacobolus 15y agoAlso, the PNG image is 24 bits per channel, obviously unnecessary for this kind of project. Taken down to 8 colors it loses no effective detail, and the size is dropped to 2.6 kb, or perhaps smaller after gzip.
- simcop2387 15y agoRun that sprite sheet through optipng and gimp to remove extra white space and you can get it down to 4021 bytes.
- TeMPOraL 15y agoAnd you'll also use up much more processing power to render CSS icons than to render a plain PNG ;).
- city41 15y agoIt's pretty cool that his HTML is simply <li class="someIcon"><a href="...">label</a></li> Not saying this particular approach is practical, but if we really could arrive at a practical solution for icons that left the HTML that clean, it'd be great.
- duggi 15y agothis sentence about sums up the whole thing: "Pseudo-elements provide many possibilities to developers interested in writing semantic HTML."
- dstein 15y agoI see no reason why you couldn't use canvas to generate icons as data URI's. Each icon could then be represented as a set of canvas drawing instructions, that could be pre-rendered, scaled for different devices/uses, cached, etc. I think that would be a better long-term solution. Has anyone built something like this yet?
- DTrejo 15y agoSVG?
- cemregr 15y agoIf you're looking for resizable icons that work in non-canvas non-SVG settings, putting those vectors in a webfont is a pretty good idea too. Check out: http://pictos.drewwilson.com/ http://pictos.drewwilson.com/
- joshuacc 15y agoIn principle it's a good idea. There is a problem with this particular set, though. The icons are represented by ordinary characters like "A", which is confusing for users without webfonts, or on screenreaders. Some of this can be fixed by remapping the font to more appropriate characters, but you may not want to go to that much trouble.
- idonthack 15y agoi agree. any reasonably complete unicode font should already include many of those glyphs. for the glyphs that aren't in the unicode standard, there are private use areas that could accommodate them.
- crag 15y agoWeight is a non issue if you working on intranet sites. Or os applications. And as others have pointed out, you can compress this file down to under 1k. I like what I see. I'd love to have an icon set that didn't rely on images or "font-face" statements.
- taitems 15y agoHardly. Having worked on intranet applications I know first-hand how critical performance is. One on end of the scale you have very small companies, sharing your apps infrastructure with their timesheeting, invoicing and other app servers. On the other end you have companies like Shell, with a user base of over 110,000 employees. All their servers are hosted in the Hague.
- lyime 15y agoJust use Pictos.
- nnash 15y agoReally hate to be, that guy but this was posted almost a year ago and got ~200pts. http://news.ycombinator.com/item?id=1921197 http://news.ycombinator.com/item?id=1921197
- necolas 15y agoYeah, as the opening paragraph of the article says, I did this just as 'an exercise in creative problem solving and working within constraints. This is not a "production ready" CSS icon set.' Hopefully it's clear that it's not being presented as something to be used in production or instead of SVG/other more appropriate technologies.
- uggedal 15y agoI use slightly modified versions[1] of the heart and feed icons on http://mediaqueri.es http://mediaqueri.es. [1]: http://mediaqueri.es/static/icon.css http://mediaqueri.es/static/icon.css