Hacker News Reader

Comment by tshadwell | Hacker News Reader

I feel I am perhaps being too pessimistic, but I fear this trend toward this heavier, unused-feature filled web-- a mosaic of libraries that make web development or design better in X and Y way that really doesn't affect the end user that much, but largely increases the cost and speed of viewing a webpage, especially in places and countries without the high internet speeds the developers inevitably have.

How many icons will a website need before an abstraction like this is necessary to manage them?

If every icon has each element labelled with large prefixed classes (".iconic-camera-slr-lens-release"), this is going to be a lot of extra footprint for websites that have enough icons to make this useful.

Perhaps I am alone in thinking that colourful icons are somewhat noisy, and thus will be used only in designs where icons are prominent elements, and as such infrequently; with that frequency, they could even be individually coded for.

View on HN

It's important to think about your performance needs before you add any kind of third-party dependency. In production, you might consider using IcoMoon to create your own font with just the icons you need. [1] This library provides everything you need to do that.

The predefined classes give you flexibility when you're developing, but there's nothing stopping you from using your own names. There's also @extend in SASS that allows you to mix in icon styles to your application's classes without adding duplicate rules. [2]

[1] http://icomoon.io/app

[2] http://sass-lang.com/documentation/file.SASS_REFERENCE.html#...

The flexibility with icomoon it fantastic, once you get it wired into the app. And the ability to add your own, custom svg's is very handy!

Yeah, the ability to quickly make my own icons when the icon set I've bought doesn't have exactly what I need is pretty awesome.

yes I love icomoon!

Icomoon is great, I just wish it provided Compass markup so I could have the cross-browser support Compass provides.

+1 for IcoMoon. I tried a few of the other icon compilation apps and IcoMoon is by far and away the easiest to use with the best selection. There are slightly snazzier apps out there, but they just weren't as flexible as IcoMoon.

Managing a sprite for even 10 different icons is a huge pain in the ass.

Let's say you need a light and dark version of each icon, that makes it 20 different icons. Then you want a small version, and a big version of each, that brings it to 40. Then you need a version of each for retina, those 10 icons are now 80.

A font icon library is a god send when dealing with all these different variations since you can make these changes in the CSS without updating any of the icon sources files.

Use an icon font generated by icomoon or the like. That does not require Javascript, HTML and CSS prerequisites, is only as heavy as the used constituent SVG elements and is well-supported.

I do use icomoon, it's an amazing tool. I was just replying to the parents comment about how necessary these abstractions are:

"How many icons will a website need before an abstraction like this is necessary to manage them?"

I say they are very necessary.

i agree, but i think that ship sailed a long time ago... i think we passed the point where the speed of the internet is an embarrassing reflection on the programmers involved about 15 years ago now though...

the bugs in the browser layer alone are embarassing enough - let alone the sheer number of layers and volume of redundancy, bugs and resource spunking involved all the way down.

that moderately recent post about fixing memory usage in firefox by doing very common sensical and normal things instead of assuming memory is some kind of endless resource... i had to check it wasn't april 1st. their final memory footprint is embarassing let alone what they started with. :/

i can see the lapse of time between pressing a key and seeing a character... this was much less often the case in 1995 with 1% the horsepower - rose tinted glasses aside :/

and yet you managed to break through the sheer layers and volume of redundancy, bugs and resource spunking to make this post using your browser, using the same technologies you decry.

Of course visuals need to be balanced against load speed, but using this kind of thing will be much smaller than doing everything with bitmapped graphics. I agree that having JS for icons may be a bit much, but you could always just use it without.

Another thing that really bugs me is that with icon fonts, there's only one file to download. In this case, the user has to download each SVG file separately.

regarding large prefix classes (".iconic-camera-slr-lens-release"), can't this be mitigated by turning Gzip compression?

Reply on news.ycombinator.com