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

Icono – Pure CSS icons with only one element

saeedalipoor.github.io

Post reply on HN
Print view View original

11–20 of 22 posts

Re: Icono – Pure CSS icons with only one element

#11

Post by peteorpeter »

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 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.

Re: Icono – Pure CSS icons with only one element

#12

Post by guhcampos »

Ecco wrote: post #4

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…

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.

Re: Icono – Pure CSS icons with only one element

#13

Post by lziz »

jekrb wrote: post #8
arcatek wrote: post #2

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!

> 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) }

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".

Re: Icono – Pure CSS icons with only one element

#15

Post by lfj »

Ecco wrote: post #4

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…

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; }

Re: Icono – Pure CSS icons with only one element

#17

Post by madeofpalk »

lziz wrote: post #13
jekrb wrote: post #8

Earlier quoted context omitted.

> 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) }

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".

The author could refactor them to use ems or percents instead of pixels, that way they would automatically change size depending on their parent.

Re: Icono – Pure CSS icons with only one element

#18

Post by madeofpalk »

jekrb wrote: post #8
arcatek wrote: post #2

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!

> 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) }

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.
Post reply on HN