
Icon Fonts are Awesome - Peroni
http://css-tricks.com/examples/IconFont/
======
Too
A big warning for anyone trying this out, don't use it in places where exact
placement is required. Browsers (and operating systems) render fonts VERY
differently. Just changing the cleartype-settings in windows can make the text
placement completely off. Especially after a few letters as the error
propagates the more characters you accumulate over one row. Might not be an
issue if you only place one letter/icon, which is probably the use case here,
but keep this in mind.

~~~
evincarofautumn
This is, I think, the biggest issue with abusing fonts in this way. As a
workaround, icon fonts are excellent—but they are still undeniably a
workaround. Unfortunately, SVG is the closest we have, and isn’t a viable
solution either, for reasons other commenters have thoroughly addressed. I do
have (what I think is) a better idea in mind, but I’m not sure how it would
ever get adopted.

~~~
masklinn
> they are still undeniably a workaround.

They are a "workaround" with long history: Windows 95 shipped Marlett for
exactly this purpose of using fonts as well-supported vector graphics formats.

~~~
evincarofautumn
Oh, absolutely. It’s just a dealbreaker for me personally that fonts are
monochromatic, single-layer, and difficult to position in web pages with
precision and consistency. If those aren’t concerns, then icon fonts are a
perfectly useful tool.

------
alpad
Why arent people using SVG for this sort of thing? Isnt that HTML5's vector
graphics format?

I supose if you're using icons w/ the express purpose of using them with in-
line text, then this would be Ideal... but just seems like a weird hack, when
there is SVG available...

The author of this website claims to simply be ignorant of SVG at the bottom?
whats up with that?

Why is using a font "hack" better than using the intended container for vector
graphics?

I guess web design has always sorta been about pushing the bounderies of
browser quirks, but I kinda thought we were moving away from that. You would
think the intended use of vector graphics would be designed to be just as good
if not better than using a font to do the same thing.

~~~
masklinn
> Why arent people using SVG for this sort of thing? Isnt that HTML5's vector
> graphics format?

1\. SVG is slow, text layout engines (therefore fonts) are fast

2\. SVG support is pretty terrible (not available on Android < 3, IE <= 8 and
that's for support at all, inline-svg-in-HTML is even rarer and it's even
easier to hit shitty implementation bugs), fonts are very well supported

3\. I don't think you can use SVG in pure CSS, so you need markup, not so with
fonts (theoretically you can use SVG as background, practically I'm sure it
works half the time best)

4\. You can't hint SVG, so it does not scale well from big to small
resolutions

5\. Mixing SVG and HTML text is absolutely awful, mixing text in an iconic
font and actual text is much easier

6\. Iconic fonts are trivially "sprited" (bundle all the icons in a single
font file), this is more complex in SVG

7\. Changing the color of an iconic font to match a new or alternative layout
takes all of a single CSS property, likewise to change font (therefore the
style of all the iconset) (this assumes the iconsets use the same characters
as hooks for equivalent symbols).

> You would think the intended use of vector graphics would be designed to be
> just as good if not better than using a font to do the same thing.

You would, wouldn't you? But it turns out fonts are very, very good vector
formats for (physical) rendering sizes.

~~~
TylerE
Isn't the argument more that SVG sucks, rather than that there is anything
fundamentally wrong with vector graphics?

~~~
XLcommerce
I don't think you've used svg before. It definitely does not suck.

~~~
TylerE
No, I defiantly have, and it does. For a standard 13 years in the making, the
number of decent FULL FEATURED implementations is minuscule. Stuff that mostly
works likes Inkscape tends to use it's own dialect and not fully support all
the features.

~~~
XLcommerce
I agree with you that browser support sucks. the technology itself is _really_
cool though. Scriptable, heirarchy based vectors. What's not to like?

------
tambourine_man
You will have to download an entire font even if you are only using a few
arrows. May not be prohibitive, but it should be kept in mind.

~~~
acabal
You can create a subset of that font to serve if only using a few icons. I've
done that with Scribophile thought I can't recall right now what utility I
used to do that.

~~~
DTrejo
Expert > subsetting > custom subsetting > single characters

<http://www.fontsquirrel.com/fontface/generator>

------
fpp
For a comprehensive list of the best icon fonts around have a look at
simurai's list at <http://www.delicious.com/stacks/view/SC3hpq>

------
kapowaz
I am worried by this trend towards using a custom typeface to store icons.
Firstly, whilst it looks great in the giant preview pages linked to on HN,
these icons often look terrible at smaller sizes / without anti-aliasing.
Secondly, whilst they're undoubtedly efficient when you're going to use a lot
of them in various sizes, I question whether that's still true compared to an
optimised PNG sprite (which coincidentally can solve the first problem too).

~~~
petercooper
_these icons often look terrible at smaller sizes / without anti-aliasing._

Not to forget Windows too. Many font-face embedded fonts look hideous with
Windows' text rendering, alas.

------
tomelders
As always, use the right tool for the job. I've had some luck using icons
fonts, but it's by no means a complete solution.

Something i would like to see though: ligature support in browsers. That would
enable the creation of named icons in the font. so "right-arrow" would
literally be a "right arrow".

------
tseabrooks
Quick side note: I hit the "fancy view source" button on the bottom right and
I thought it was pretty cool. Hoped it was a draggable bookmarklet, it's not,
anyone have a favorite kick ass view source bookmarklet?

------
chrismealy
Your icon can only use one color.

~~~
Someone
I would think so, too, but how then, can Mac OS X and iOS 5 show emoji in
color? <http://www.apple.com/macosx/whats-new/features.html#text>: "A color
emoji font in Unicode 6.0 lets you display emoticons"

~~~
robin_reala
They hack PNGs into the font itself. More info at
<http://typophile.com/node/83760#comment-470876>

~~~
Someone
Thanks for the pointer. A hack, indeed.

------
kaishin
No, they are not. At least not yet ➜ <http://drp.so/058604> (16px).

------
Johnyma22
I used icon fonts on MSH, came out perfect.
<http://myschoolholidays.com/Wilsden-Primary-School-8639>

------
notthemessiah
This is minor, but fonts also have sub-pixel rendering.

------
alexchamberlain
I would like to see a way for browsers to specify the width/height of an
image, so that the server can return an appropriate file.

------
ck2
Can you use an overhead text-shadow to give them a different color border? ie.

    
    
        text-shadow: 0 0 5px #0000ff;

------
ianterrell
Rabble rabble rabble!

------
wavephorm
I'm really in favor of an html5 canvas based icon system.

    
    
      <canvas width=50 height=50 class="icon icon-check">
    

Icon-check then calls a JavaScript function which draws the icon to the
canvas. The icon files end up being javascript files which can be gzipped
along with other assets.

------
J3L2404
Everytime I visit css-tricks I am more and more impressed by the quality of
literally everything on the site.

