5 ms·

Icono – Pure CSS icons with only one element

139 points by Nieminen 12y ago

arcatek 12y ago
That's really smart - However, it seems impossible to use multiple sizes in a single document, which make it impractical over other alternatives such as Ionicons, Icomoon or FontAwesome. Still a nice showcase, congrats!
- jekrb 12y ago
  > it seems impossible to use multiple sizes in a single document How so? It's possible in most cases to stick an extra class on the icon, say `.2x` and add a rule to your css such as — [class*="2x"] { transform: scale(2) }
  - lziz 12y ago
    Perfectly viable technique, though if they are written in SASS/LESS/whatever, the author could refactor the icons to mixins with a parameter that sets the scale, so the values themselves are "true".
    - madeofpalk 12y ago
      The author could refactor them to use ems or percents instead of pixels, that way they would automatically change size depending on their parent.
  - madeofpalk 12y ago
    Downside of using this is transform still leaves the box size that's in the flow of the document the same size. Problematic if you have the icons inline, or in elements like buttons.
madeofpalk 12y ago
Impressive. While I appreciate the effort and the fact that is is more of an experiment than a production-ready package, it does seem like an odd choice to go with fixed-size pixels instead of something relative, like ems or percentages. Regardless, well done. Don't let my typical-to-HN negative tone take away from the accomplishment of this.
- vegedor 12y ago
  px is a size supposed to be fixed size in the eye of the beholder, but relative to the size and the density of the display.
jekrb 12y ago
These are awesome. Reminds me of the set Nicholas Gallagher created a few years ago. http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://nicolasgallagher.com/pure-css-gui-icons/demo/
Ecco 12y ago
Very impressive. Slow as hell on my computer though (3 GHz Core2Duo, Chrome 39, OS X 10.9), to the point where it doesn't seem realistically usable…
- bwindels 12y ago
  second this, impressive but feels a bit sluggish.
- hk__2 12y ago
  No issue with 1.3 GHz, Chrome 39, OS X 10.10.
- iN7h33nD 12y ago
  I think the type of animations make this feel slow when it is actually not slow.
- guhcampos 12y ago
  Same impression, and I'm on a Macbook Book Pro Retina. It's really, really slow on the retina display. A bit better on my second, Full HD monitor, but still not really responsive.
- lfj 12y ago
  Speed up the transitions to get rid of the laggy feeling. Add this css rule to your inspector stylesheet: .demo, .demo i, .demo .about, .change-color i { transition: all 0s !important; }
aembleton 12y ago
An incredible achievement. How long did this take to make?
peteorpeter 12y ago
It might be time for me to stop worrying about IE8 and embrace `transform`-dependent icons. I regularly create one-off semantic icons as long as they don't rely on `transform`. That limits it to ones based on a character glyph - (i), (?), (x), etc - strictly orthogonal blocks - (+), (-), etc. - or CSS triangles - mostly arrows (which don't always render great anywho). I'm always too concerned about the fallback in browsers without `transform`. But really, that's illogical - it's just IE <= 8, and generally don't need to worry about that support anyways. I guess my hangup is that the meaning of the icon gets garbled when it isn't displayed correctly in older browsers, and that seems like it crosses a line. (Thought about the "semantics" of an icon quickly feels like Philosophy 101 and probably means its time to get back to work!) As others have pointed out, I wouldn't use the pixel-based positioning/widths as this does, but `em`s, `rem`s or `percent`s. Relying on `tranform: scale(x)` would complicate layout flows - for one thing you'd always need to compensate for the scale with `margin`, `padding`, or other pixel-budging.
techmaddy 12y ago
Awesome. Please keep adding more icons.
frevd 12y ago
Drawing with multiple box-shadow's, nice (performant??)
zem 12y ago
could someone explain what's going on here? i looked through the page and some of the code on github and am no wiser.
Frozenlock 12y ago
6 Apple products in these icons... Was Apple a sponsor?
megatroll 12y ago
Absolutely beautiful!

139 points by Nieminen 12y ago

That's really smart - However, it seems impossible to use multiple sizes in a single document, which make it impractical over other alternatives such as Ionicons, Icomoon or FontAwesome. Still a nice showcase, congrats!

jekrb 12y ago
> it seems impossible to use multiple sizes in a single document How so? It's possible in most cases to stick an extra class on the icon, say `.2x` and add a rule to your css such as — [class*="2x"] { transform: scale(2) }
- lziz 12y ago
  Perfectly viable technique, though if they are written in SASS/LESS/whatever, the author could refactor the icons to mixins with a parameter that sets the scale, so the values themselves are "true".
  - madeofpalk 12y ago
    The author could refactor them to use ems or percents instead of pixels, that way they would automatically change size depending on their parent.
- madeofpalk 12y ago
  Downside of using this is transform still leaves the box size that's in the flow of the document the same size. Problematic if you have the icons inline, or in elements like buttons.

madeofpalk 12y ago

Impressive. While I appreciate the effort and the fact that is is more of an experiment than a production-ready package, it does seem like an odd choice to go with fixed-size pixels instead of something relative, like ems or percentages. Regardless, well done. Don't let my typical-to-HN negative tone take away from the accomplishment of this.

vegedor 12y ago
px is a size supposed to be fixed size in the eye of the beholder, but relative to the size and the density of the display.

jekrb 12y ago

These are awesome. Reminds me of the set Nicholas Gallagher created a few years ago. http://nicolasgallagher.com/pure-css-gui-icons/demo/ http://nicolasgallagher.com/pure-css-gui-icons/demo/

Ecco 12y ago

Very impressive. Slow as hell on my computer though (3 GHz Core2Duo, Chrome 39, OS X 10.9), to the point where it doesn't seem realistically usable…

bwindels 12y ago
second this, impressive but feels a bit sluggish.
hk__2 12y ago
No issue with 1.3 GHz, Chrome 39, OS X 10.10.
iN7h33nD 12y ago
I think the type of animations make this feel slow when it is actually not slow.
guhcampos 12y ago
Same impression, and I'm on a Macbook Book Pro Retina. It's really, really slow on the retina display. A bit better on my second, Full HD monitor, but still not really responsive.
lfj 12y ago
Speed up the transitions to get rid of the laggy feeling. Add this css rule to your inspector stylesheet: .demo, .demo i, .demo .about, .change-color i { transition: all 0s !important; }

aembleton 12y ago

An incredible achievement. How long did this take to make?

peteorpeter 12y ago

It might be time for me to stop worrying about IE8 and embrace `transform`-dependent icons. I regularly create one-off semantic icons as long as they don't rely on `transform`. That limits it to ones based on a character glyph - (i), (?), (x), etc - strictly orthogonal blocks - (+), (-), etc. - or CSS triangles - mostly arrows (which don't always render great anywho). I'm always too concerned about the fallback in browsers without `transform`. But really, that's illogical - it's just IE <= 8, and generally don't need to worry about that support anyways. I guess my hangup is that the meaning of the icon gets garbled when it isn't displayed correctly in older browsers, and that seems like it crosses a line. (Thought about the "semantics" of an icon quickly feels like Philosophy 101 and probably means its time to get back to work!) As others have pointed out, I wouldn't use the pixel-based positioning/widths as this does, but `em`s, `rem`s or `percent`s. Relying on `tranform: scale(x)` would complicate layout flows - for one thing you'd always need to compensate for the scale with `margin`, `padding`, or other pixel-budging.

techmaddy 12y ago

Awesome. Please keep adding more icons.

frevd 12y ago

Drawing with multiple box-shadow's, nice (performant??)

zem 12y ago

could someone explain what's going on here? i looked through the page and some of the code on github and am no wiser.

Frozenlock 12y ago

6 Apple products in these icons... Was Apple a sponsor?

megatroll 12y ago

Absolutely beautiful!