Show HN: CSS ICON, an icon set crafted by pure CSS • Hacker News Board

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.styleSheets[0].insertRule('.iconWrapper,.iconViewer{background-color: #999 !important}',0)

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

#16

Post by Retr0spectrum » Mon, Oct 17, 2016, 12:51 PM UTC

bhouston wrote: post #6

What is cheaper CPU and download wise? CSS icons or font icons.

RE dowload size, I guess it depends entirely on how many you plan to use. Downloading an entire font to use a single icon would be inefficient compared to a few lines of CSS.

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

#17

Post by retox » Mon, Oct 17, 2016, 12:58 PM UTC

OJFord wrote: post #13

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

I dislike using specialist fonts because it's overloading what a character is supposed to show. If the user doesn't have the webfont, either because it was blocked or because of support reasons, the page becomes a mess of alphabet soup.

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

#18

Post by wentin » Mon, Oct 17, 2016, 1:07 PM UTC

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.

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

#19

Post by microcolonel » Mon, Oct 17, 2016, 1:10 PM UTC

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

Many of these are also standard Unicode characters (such as and all the smileys)

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

#20

Post by wentin » Mon, Oct 17, 2016, 1:11 PM UTC

zhan_eg wrote: post #4

Well, 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 sel…

oh yeah! thanks! this is fixable, I just have to draw it in a different way, logging a bug.

I haven't tested it but I am guessing it has better rendering time, it has much less code than SVG (with their path, it is often quite long) and you can style it (such for hover state) and animate it more easily.

With SVG, you can do the same, but it has to be inline in HTML, no img tag embed SVG and such, so if you have 2 of the same icons on the same page, the code has be to repeatedly inserted twice in the html, but with css it just share the same classname.