Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CSS ICON, an icon set crafted by pure CSS

cssicon.space

Post reply on HN
Print view View original

61–69 of 69 posts

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#61

Post by RubyPinch »

OJFord wrote: post #13

Assuming I can find an equivalently desirable icon here, in font awesome, or an SVG; which should I prefer?

by my opinion

if you want something found on a CDN and as a result more likely cached in browsers (or pre-loaded via an extension), font awesome is a safe bet

If you want the most pure option, SVG (hint, change the background of the css icon boxes to see why, the usage of background-colored boxes everywhere is pretty damaging if you want to use it on anything other than flat colors)

if you want the icon to interact with your content (want text in a speech bubble? changing numbers? etc?) or to be quickly tailorable, then probably CSS icons

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#62

Post by RubyPinch »

myfonj wrote: post #15

Really nice execution! I remember seeing similar projects [1][2] in the past and pondered usage of the `currentColor`. Btw, there are several occurrences of white components [4]; they are necessary for "breaking" lines, but surprisingly there are very few of them and overall do't break much [3]. [1] http://cikonss.zzapdeveloped.it/ [2] http://one-div.com/ (warning, hugely ad infested currently) [3] console: document.…

its mostly pretty avoidable, border-image with a gradient solves it a majority of the time

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#63

Post by wentin »

RubyPinch wrote: post #62
myfonj wrote: post #15

Really nice execution! I remember seeing similar projects [1][2] in the past and pondered usage of the `currentColor`. Btw, there are several occurrences of white components [4]; they are necessary for "breaking" lines, but surprisingly there are very few of them and overall do't break much [3]. [1] http://cikonss.zzapdeveloped.it/ [2] http://one-div.com/ (warning, hugely ad infested currently) [3] console: document.…

its mostly pretty avoidable, border-image with a gradient solves it a majority of the time

can you say more about this approach? very curious

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#64

Post by RubyPinch »

wentin wrote: post #63
RubyPinch wrote: post #62

Earlier quoted context omitted.

its mostly pretty avoidable, border-image with a gradient solves it a majority of the time

can you say more about this approach? very curious

https://codepen.io/anon/pen/xEykRg?editors=1100 in retrospect probably not a complete solution in of itself, but if doing the top 3 borders, with a :after with a gradient background image, should work for all colors

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#66

Post by deecewan »

lucasmullens wrote: post #51
_puk wrote: post #3

Not 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…

IE8 doesn't support SVG, which might matter for some websites

But does ie8 support before and after elements okay?

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#67

Post by sly010 »

wentin wrote: post #18
amelius wrote: post #7

Why not just use SVG inside a data url? E.g., as in [1]. [1] https://en.wikipedia.org/wiki/Data_URI_scheme#Examples

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.

> css icon has less code

this is just not true. using svg you can have a single string describe an arbitrarily complex path.

> the code is more editable

also not true. they are both just text...

> and managable

how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them.

> argumentably better performance (because i haven't tested it)

what does that even mean? loading time? rendering time? memory?

Congratulations, there is some pretty cool wizardry going on in there, and it's undoubtedly fun, I just find your rationale for it completely made up. You still got my upvote though, just please don't say such unsubstantiated silly things.

edit:formatting

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#68

Post by wentin »

sly010 wrote: post #67
wentin wrote: post #18

Earlier quoted context omitted.

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.

> css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. > the code is more editable also not true. they are both just text... > and managable how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them. > argumentably better performance (because i haven't tested it) what does that even mean? loadi…

> css icon has less code

this is just not true. using svg you can have a single string describe an arbitrarily complex path.

reply: unless you count code by lines, but that single line of string for paths feels really really long and not readable. see below

> the code is more editable

http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063">Untitled-1 vs. in css http://cssicon.space/#/icon/mustache-solid

to change its shape you need to use illustrator for SVG vs. in css just some property change. Yes they are just text, but are you really smart enough to edit the above SVG code by hand?

> and managable

managable as you can have clean html, all you need is a div, vs. svg you have to insert the whole chunk of svg code in your html.(Using won't give you flexibility, svg has to be inline) you can have package tool to insert svg programmatically but when you just prototyping, not gonna do that whole process to just get some icon showing up. CSS ICON is grab and go icons.

> arguably better performance (because i haven't tested it)

It is not true rendering time wise, as someone else analyzed CSS need more rendering time. But you have less HTTP request comparing to icon fonts or external SVG files. Download time is faster

Re: Show HN: CSS ICON, an icon set crafted by pure CSS

#69

Post by wentin »

sly010 wrote: post #67
wentin wrote: post #18

Earlier quoted context omitted.

css icon has less code, the code is more editable and managable, argumentably better performance (because i haven't tested it) in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.

> css icon has less code this is just not true. using svg you can have a single string describe an arbitrarily complex path. > the code is more editable also not true. they are both just text... > and managable how so? in svg you can group things, easily shuffle things around, save them in separate files and point to them. > argumentably better performance (because i haven't tested it) what does that even mean? loadi…

like I said in the video, I admit it is not a replacement technique of SVG for icons, but it does have its niche use cases. When I prototype, or I need some simple icon that I want to animate when hover, CSS is easier. You can see a lot of hamburger icon out there are done by css. This is a reference so that someone else don't need to redraw the hambuger icon in css again and again.

Beyond that I have positioned it as an CSS learning tool. I spent more time making the web app than doing the icons, with angular.js, so that one can click on any icon and inspect and learn these css tricks within 10 mins or so. The easiest way to learn any programming language is to do a hands-on project, and I find cssicon is bite-sized project that give the learner some learning satisfaction within the ideal short time span. I hope this helps someone

Post reply on HN