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 sub-element in your html (<i>) and you get three more.
Whilst a neat trick, how this is better than having a contained icon in say SVG?
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.
The painting performance should be pretty similar for both CSS and SVG: they both get rasterized via the same 2D vector graphics backend in popular browser engines. Most 2D vector graphics backends go to a lot of effort to cull invisible regions.
CSS icons may be slightly slower than an optimized SVG due to the overhead of restyling and layout. Also, the browser-side painting may be a bit slower for CSS icons, because border painting involves fairly complex logic compared to drawing a path (and for example in Gecko you have to construct display list items for individual borders but not paths). But we're talking about really small differences: I highly doubt they matter in practice.
What about caching - is that an advantage over inline SVG? I imagine the css would compress better too? I'd like to see animated ones. Holy geocities! I have no clue how it works. Amazing.
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.
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
<svg id="beard" data-name="beard 1" xmlns="http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063"><title>Untitled-1</title><path d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z" fill="#fff"/><path d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z" fill="#fff"/></svg>
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 <img/> 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
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
I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while actually working. lol
Ah, that's a pretty decent workaround. Though I'm not a fan of putting encoding encoded information into style sheets, I'm not exactly against it either.
Though the method I wanted to use would work if it weren't for the existing icons symbols inside of sprites, which seems to be only supported in Firefox's CSS.
For example:
```
<svg>
<symbol id="helloworld">[... a bunch of paths]</symbol>
<symbol id="anothersym">[...]</symbol>
</svg>
```
It's just disappointing that while referencing symbols works just fine with a <use xlink:href> tag, it doesn't work as a CSS url property value. I'm not sure why that would be.
EDIT: Yes, I'm sorry, I know this isn't Stack Overflow. Though I think the above(without symbol tags of course) may be the best alternative to pure-CSS icons if your graphics are more complicated.
If you're wanting to use fragment identifiers to refer to multiple sprites in a single SVG, that issue was fixed in Chrome in November of last year.[1] I'm not sure if the fix has propagated widely enough to be considered practical for production use, but it's at least a move in the right direction.
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 self-explanatory :)
From a performance perspective, how do those compare to using SVG icons?
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.
Wow! I'm not really a front end person who works with this kind of stuff, so I don't know the real use case of this versus something else.
But: I went through a lot of the simpler ones on the codepen (minus, plus, menu, etc.) and learned some awesome techniques that I didn't know, then recreated them from scratch and was able to create some of the more complicated things. tbh I probably learned more css in the last hour than in any other single hour of my life. Nice!
I present: crudely drawn "x" icon with a circle around it:
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.
What you did with that border radius on the mustache icon is so slick! I had no idea the border-radius could be made to curl up beyond the top of the shape like that. And then making mirrored circles out of a box-shadow, that is tidy!
I tip my hat and raise a glass to you, you're a great artist.
CSS ICON is good for cases like, if you want to animate it, or style it on hover state in a particular way, of you need to prototype something fast on codepen where you don't want external assets files or long long pasted-in SVG code, this is much better.
The shortcoming is that you can't do any icon in the world with css. But if you already find this is equivalently appearance wise, the performance and code hygiene is much better than SVG or icon fonts.
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.
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
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].
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
My concern is the burden this seems to place on hardware. By which I mean that loading the page into my browser (Firefox) and letting it sit for a minute spun up my laptop fan to an audible level and warmed one of my quadriceps.
All other things being equal, pure CSS could be a superior alternative to SVG / font icon if your SVG / font icons are loaded via HTTP (this is usually the case with SVG and always the case with font icons). Reducing the number of requests is associated with better performance and user experience.
I haven't done web stuff in 15+ years. Isn't there the equivalent of a compiler to produce a more static page, which would handle things like putting SVGs inline? Or the ability to create a library (like CSS) where there would only be a single reference to all the reusable components of a page, which may in turn be "compiled" from individual source files?
i struggled a lot finding use case for everyone. I talked about that in the video. The short version is, less code, more manageable, you can style it and animate it easily, while it is not as powerful as SVG. And it is a good start point to learn CSS
there are design cases like, I want to make everything minimalistic, so everything should be consistent of 1px stroke weight, then i need to have a special + sign drawn :) Designers are this this. like developer has to indent 2 spaces instead of 4 or 8. similar thing
this sucks, it is on github gh-pages, should be fine on the hosting side, probably the domain name. http://wentin.github.io/cssicon maybe try this but probably won't work because it redirect to cssicon.space immediately.
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 (<i>) and you get three more.
Whilst a neat trick, how this is better than having a contained icon in say SVG?