Thanks! I agree might be interesting to try to capitalize further on animating/coloring individual elements and work on scalability. Just trying to gauge how much time to invest.
Aditionally, with the flags, I noticed that you have Switzerland as a rectangle. I know that's not an uncommon representation of it, but its flag is actually a square.
And in the "pedantic++" category: check out flag proportions, too. See for example https://flagspot.net/flags/nl-lu.html, which explains the difference between the flags of Monaco and Indonesia (buried in a discussion about the flags of the Netherlands and Luxembourg): same colors, but different proportions.
Something that could further ease the color customization would be to use currentColor [1] on the border colors, allowing the customization to be made simply by changing the "color" attribute of the element.
There are some more problems with the flags. The colours of the french and german flag are in the wrong order. The icelandic and norwegian flags are missing the white line around the cross. The class for the netherlands shouldn't be lb-flag-holland.
EDIT: To the author, the download and email icons are the same.
This is fantastic. A feature you might not have realized is that it works well with NoScript users. With font-faces considered harmful[0], these icons can be delivered to the user, vulnerability free.
That doesn't sound right. My 2520M stays at about 8%, using Firefox. That's still relatively high, but in reality there would only be a few on the screen at once.
I can confirm that an i5-4200U (decent < 1000$ notebook) goes from 2-4% lowest proc frequency to 14% max proc frequency (and the fan starts). Using Firefox. It is clearly noticeable. Of course YMMV
So, the million dollar question: is it faster to use these, images/sprites, icon fonts? The trade-off I'm assuming is download/load speed vs. cpu load?
Don't forget about compatibility. You can be reasonably sure that font icons will display the same everywhere. CSS-based icons are all over the map compatibility-wise (display issues across browsers).
That technique could be used to make multi-color font icons if it were cross-browser compatible. Maybe one day. But I think SVG icons are where things are headed.
Yeah there are three currency icons that change a lot between browsers because part of the icon is a character. Definitely doesn't really work. Having trouble finding a way to create the central shape with the 3 available elements. May need to scratch them until I can.
Definitely good for working on a few weird CSS oddities and helped me get better acquainted with GitHub and Bower. I figured being able to work with individual elements within the icon might be a plus over icon fonts, but definitely not as reliable. Otherwise, I also couldn't come up with much over SVG either. Thanks for the feedback!
It seems really well done. However I can't help but think "is this really a use case for CSS; or more of a neat hack?". Is that why you're asking if it's worth continuing?
True, may just be a neat hack. The opportunity to work with individual elements of an icon independently and the challenge of the constraints was the initial draw to the project. Maybe there would be a use case for the simple icons and icons that would really benefit from coloring individual elements (hence the flags), but I think there are definitely plenty of drawbacks and it's pretty hacky in some places.
I also don't have a great understanding of some of the technical drawbacks and compatibility issues that have been brought up here, so this HN conversation has been an enormous help.
I think you've hit on my main question. Thanks for the feedback and for taking a look!
nicely done, these are pretty cool. like anything interesting in css i'm not sure if they're practical, but they're cool regardless of the practicality.
>to set your own color, simply set the icons border color in your CSS, like so: .lb-, .lb-::before .lb-*::after
could you use border-color:inherit on the :before and :after pseudo-elements, so it's just a single selector change to change the color?
Wow, that makes a ton of sense, definitely cleaner than what I've got going now. There are plenty of places to clean it up, but that would be a big one.
it's exactly what svg is suited for. I cringe anytime I see css graphics. ONe guy did an entire 3D scene using CSS and I was both awestruck and sickened when I saw the explanation of how it was done. what a pain in the ass with little reward IMO. But if somebody wants to do something, whatevs go for it. hack away.
I was completely amazed when I recently checked browser support for inline SVG; almost all current browsers support them! [1] So I decided to use inline SVG for icons and logos. It's extremely fast (no separate network request, images embedded in gzipped html source), and as a bonus I can style the images easily using CSS (eg. change colors on hover/active state)
The nicest part about this is that I can use Adobe Illustrator (or any other vector editor) to create the graphics, and then paste them straight into HTML.
Yes, I've done that too. What's even nicer is that you can write scripts that generate SVG. Drawing symmetric things like a gear can be very cumbersome in a vector editor, but it's really nice if you draw it with a script. (And I was finally able to make use of all the math & geometry I learned in school)
I'd stay away from css to create images personally. it's just too hackish. seems like wikipedia implements some sort of svg to png conversion on the fly. that is preferable for me. css isn't even good at what it's intended for. I certainly don't see it solving more problems.
Looks great but the first thing we see when we load the page is a couple lines of instruction and an icon which is not obvious/ just looks like a square and it's confusing.
If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters.
I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.
Looks great but the first thing we see when we load the page is a couple lines of instruction and an icon which is not obvious/ just looks like a square and it's confusing.
If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters.
I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.
70 comments
[ 3.2 ms ] story [ 143 ms ] threadThe feedback is a huge help!
The icons look great.
Thanks for taking a look!
maybe you could put the license information on that page! (The github page says it is MIT License for those who wonder)
btw the french flag is backwards (Blue - White - Red is the good one)
EDIT: Thanks for the flag fix benjamin!
I'll make sure to add license info to that demo/download page. Thanks again, a huge help!
Just an fyi :)
So, Belgium should be 13:15 (https://flagspot.net/flags/be.html, for US flags 10:19 seems best for all uses (https://flagspot.net/flags/us-size.html#prop), etc.
But that certainly is just a fyi :)
Something that could further ease the color customization would be to use currentColor [1] on the border colors, allowing the customization to be made simply by changing the "color" attribute of the element.
[1] http://tympanus.net/codrops/css_reference/color_value/#secti... which I discovered with https://twitter.com/SaraSoueidan/status/564090319117881344
This is fantastic. A feature you might not have realized is that it works well with NoScript users. With font-faces considered harmful[0], these icons can be delivered to the user, vulnerability free.
[0] https://hackademix.net/2010/03/24/why-noscript-blocks-web-fo...
I'll take a look back at the email and download icons, good eye.
One suggestion for animated icons: add "animated" and "stopped" states if you didn't already.
One does not simply browse only one page at a time anymore
Maybe the animated ones should be left as images so far, otherwise great work with the static icons ++
Here's their demo but with some color added: http://codepen.io/anon/pen/VYQMea
But yeah, you're typically stuck with one color. Here's a demo that shows off multi-color fonts (Firefox only): http://pixelambacht.nl/2014/compyx-a-multicolor-8bit-font/
That technique could be used to make multi-color font icons if it were cross-browser compatible. Maybe one day. But I think SVG icons are where things are headed.
As for compatibility issues, there's one listed on this page: https://news.ycombinator.com/item?id=9047846
I'm using Firefox on Arch. I guess it could be something to do with me not having the right fonts installed.
Thanks for taking a look at it!
I also don't have a great understanding of some of the technical drawbacks and compatibility issues that have been brought up here, so this HN conversation has been an enormous help.
I think you've hit on my main question. Thanks for the feedback and for taking a look!
>to set your own color, simply set the icons border color in your CSS, like so: .lb-, .lb-::before .lb-*::after
could you use border-color:inherit on the :before and :after pseudo-elements, so it's just a single selector change to change the color?
Thanks!
Example see here: http://jsfiddle.net/Lszz5392/1/
The nicest part about this is that I can use Adobe Illustrator (or any other vector editor) to create the graphics, and then paste them straight into HTML.
[1]: http://caniuse.com/#feat=svg-html5
If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters.
I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.
If you want more people to use it, take the section that has the picture of ALL the icons, and move it to the top of the landing page. Just put some text like "LittleBox something about these icons people will like" in big letters.
I almost left the page. I am glad I scrolled down because I really like them, and I can use the flags in one of my projects.