Hacker News new | past | comments | ask | show | jobs | submit login

What's the argument against icon fonts? Using actual SVGs?



- Font rendering is very inconsistent across platforms, so your icons can look pretty bad (e.g. on Windows)

- You're more likely to hit aligment/layout issues because you're using a tool designed for text to render pictures

- The character codes used are textual information but have no semantic meaning (this can be addressed by using ligatures or characters in the private unicode range)

- Adding more icons requires regenerating the font

- Using a subset of icons requires regenerating the font

- Font authoring is non-trivial and requires much more specialized tools and knowledge when compared to SVG

- You need to ship the font in various formats (TTF, OTF, WOFF, WOFF2)

- It's not easy to animate icons, or include colors or transparency

- By now SVG support is sufficiently widespread, so the original rationale for using font icons no longer applies

None of these, except maybe the rendering quality, are deal breakers. Workarounds and counterarguments do exist. And SVG does have some disadvantages too (e.g. parsing overhead, filesize, memory consumption)

I personally side with using SVGs currently. As technology progresses, I might definitely reassess my view.


Yes 100% put your icons in an include file of svg defs.

There are a number of tools that will optimize svg files for size like svgo. Output straight from Illustrator, for example, has a lot room for improvement. I also usually end up hand-tweaking for things like removing the full style and doing that in my site's CSS.

What I think is really still needed are more options besides Illustrator for generating svg content. Yes, Inkscape is overall ok but is lacking in setup ease and genera speed.

There a number of programs that are so close to doing what is needed and then won't save or export an svg. Pixelmater, looking at you.


Icon fonts have been breaking websites for people that do not allow websites to set their fonts.


Are those the same people that disable JavaScript everywhere too? Imagine that you were running desktop apps and said "ok I want this program, but I only want it to use standard widgets, my chosen font, and not use certain API's. Wait why does this look funny and not work right?!"


Many dyslexics use their own fonts in their web browsers, because they like to be able to read the sites more easily.

It isn't just bloody-minded fanatics who object to web fonts.

(full disclosure: I am a bloody-minded fanatic and also object to web fonts)


Actually not. I allow Javascript but I block web fonts because I think they're a stupid idea.

Your argument about desktop apps isn't very good because people can (and do) prevent desktop apps from doing certain things and accessing various stuff, like web cams, the microphone, system directories, the internet, etc. If my text editor breaks because it can't access my webcam, I'd say it's a serious problem.


Just curious, how do you actually block desktop apps from doing such things, aside from unplugging the device in question that is?


It seems worth noting that as web browsers have removed the ability to disable JavaScript they have added options to disable web fonts. I flipped this switch in Firefox for Android because it makes pages load noticeably faster and conserves data. Lots of sites seem to host web fonts on third-party CDNs which require a separate TCP connection: a big deal on high-latency mobile.

Blocking web fonts usually does not noticeably degrade a site's usability or functionality. Icon fonts are the exception. I've learned that a question mark in the upper-right corner is usually a site's menu, except when it's the search function. I don't think that this level of breakage is comparable to what happens when JavaScript is disabled, since many sites just break completely without scripting.


Icon fonts can flash on page refresh. GitHub's approach of embedding individual SVG icons eliminates this: https://github.com/blog/2112-delivering-octicons-with-svg




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: