TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Icono – Pure CSS icons with only one element

139 pointsby Nieminenover 10 years ago

11 comments

peteorpeterover 10 years ago
It might be time for me to stop worrying about IE8 and embrace `transform`-dependent icons.<p>I regularly create one-off semantic icons <i>as long as they don&#x27;t rely on `transform`</i>. That limits it to ones based on a character glyph - (i), (?), (x), etc - strictly orthogonal blocks - (+), (-), etc. - or CSS triangles - mostly arrows (which don&#x27;t always render great anywho).<p>I&#x27;m always too concerned about the fallback in browsers without `transform`. But really, that&#x27;s illogical - it&#x27;s just IE &lt;= 8, and generally don&#x27;t need to worry about that support anyways. I guess my hangup is that the <i>meaning</i> of the icon gets garbled when it isn&#x27;t displayed correctly in older browsers, and that seems like it crosses a line. (Thought about the &quot;semantics&quot; of an icon quickly feels like Philosophy 101 and probably means its time to get back to work!)<p>As others have pointed out, I wouldn&#x27;t use the pixel-based positioning&#x2F;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&#x27;d always need to compensate for the scale with `margin`, `padding`, or other pixel-budging.
arcatekover 10 years ago
That&#x27;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.<p>Still a nice showcase, congrats!
评论 #8873917 未加载
madeofpalkover 10 years ago
Impressive.<p>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.<p>Regardless, well done. Don&#x27;t let my typical-to-HN negative tone take away from the accomplishment of this.
评论 #8878473 未加载
jekrbover 10 years ago
These are awesome. Reminds me of the set Nicholas Gallagher created a few years ago. <a href="http://nicolasgallagher.com/pure-css-gui-icons/demo/" rel="nofollow">http:&#x2F;&#x2F;nicolasgallagher.com&#x2F;pure-css-gui-icons&#x2F;demo&#x2F;</a>
Eccoover 10 years 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&#x27;t seem realistically usable…
评论 #8874490 未加载
评论 #8875565 未加载
评论 #8874266 未加载
评论 #8874108 未加载
评论 #8873879 未加载
aembletonover 10 years ago
An incredible achievement. How long did this take to make?
frevdover 10 years ago
Drawing with multiple box-shadow&#x27;s, nice (performant??)
zemover 10 years ago
could someone explain what&#x27;s going on here? i looked through the page and some of the code on github and am no wiser.
techmaddyover 10 years ago
Awesome. Please keep adding more icons.
Frozenlockover 10 years ago
6 Apple products in these icons...<p>Was Apple a sponsor?
megatrollover 10 years ago
Absolutely beautiful!