Show HN: CSS ICON, an icon set crafted by pure CSS
cssicon.space
Show HN: CSS ICON, an icon set crafted by pure CSS
1–10 of 69 posts
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#2Very cool! I'd never seen the `currentColor` option for borders, great to learn about that.
Some of the icons don't look great at the small size, particularly the smilies (Chrome 53 on OS X)
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#3Not sure about the smileys, but the functional icons are pretty neat, thanks for sharing.
Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive, and does a great job of visualising how these icons are built up.
However, it does highlight (for me personally), the abuse of the before and after pseudo elements; Essentially it is giving you three layers, great. Want 4, add another sub-element in your html () and you get three more.
Whilst a neat trick, how this is better than having a contained icon in say SVG?
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#4Well, for me on Firefox 50.0b6, Chrome 54 and IE 11 on Win 8.1 the previews look the same, but then there are some differences when you check a specific one - for example the smiley has an upper lip on Firefox - http://cssicon.space/#/icon/smiley :) http://i.imgur.com/XlqKPhW.png.
Still the idea is very cool, you can basicly do anything with CSS (if anyone is interested check https://cssquests.com/ , the name is self-explanatory :)
From a performance perspective, how do those compare to using SVG icons?
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#5I like clicking on a class and selecting the item. Good job. On Opera 40.0.2308.81 work and Chrome 54 good work.
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#6What is cheaper CPU and download wise? CSS icons or font icons.
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#7Why not just use SVG inside a data url? E.g., as in [1].
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#8Very cool! I'd never seen the `currentColor` option for borders, great to learn about that. Some of the icons don't look great at the small size, particularly the smilies (Chrome 53 on OS X)
Here's a helpful video on the topic: https://www.youtube.com/watch?v=krbKkLPXwlQ
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#9Very cool, good job! But what's the use-case?
Re: Show HN: CSS ICON, an icon set crafted by pure CSS
#10Not sure about the smileys, but the functional icons are pretty neat, thanks for sharing. Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive, and does a great job of visualising how these icons are built up. However, it does highlight (for me personally), the abuse of the before and after pseudo elements; Essentially it is giving you three layers, great. Want 4, add another s…
> Slightly OT, but the codepen highlighting of the various steps taken is incredibly intuitive
Is that really part of Codepen though? I thought it was something the author had done manually.