Hacker News Reader

Comment by StavrosK | Hacker News Reader

I quite like Font Awesome, but it strikes me as a bit bloaty to include 200 KB (best case) of files (i.e. all the icons) just to add a few icons.

Would the old method of a bunch of small png files in a directory work much better, now that HTTP/2 is here?

View on HN

I just wanted to plug Icomoon ( https://icomoon.io/ ) -- They will let you assemble your own custom font icon set using subsets of public glyphs such as FA, and your own SVG images. I Hope this helps someone.

I use icomoon and it is definitely helpful but I must say the UX for creating icon sets is quite scary to use. Clicking on an icon by default removes or adds it to the icon set, so its incredibly easy to exclude an icon you are using already (meaning next time you publish your font, that icon will no longer render on your page)

Yeah, I've done this countless times, only realising once I have packaged it into my project. I ended up creating a Webpack loader which takes a small JSON file and creates an icon set for my project. I could consider releasing it on Github if there is interest in something like this?

That would be awesome, I'd definitely be interested in having a look.

Absolutely!

I use Icomoon extensively, it works great.

I usually use icomoon as well. Are there any benefits to font awesome over icomoon?

One is that there is a much better chance that your user is going to have the font pack already cached.

Do people actually include the entire font? I usually just grab the few svg icons I need and include those.

For FA? I would expect so. It' much easier to just link to the whole package for most people.

The same crew runs Fort Awesome, which lets you do exactly this: https://fortawesome.com/

They also just bought an icon design studio, Symbolset, and include many of their icons in the Fort Awesome icon selector: https://symbolset.com/

I've been using Fort Awesome for 6 months and I'd highly recommend them. For $50/year it's a steal.

My favorite workflow is grabbing an svg icon from Noun Project, modifying it in Illustrator until it suits my needs, copying it (Cmd + C), and pasting it directly into the Fort Awesome import box.

This has all the benefits of generating svgs on your own with very little downside. It's saved me a lot of time and it makes turning an app design into a finished product a much faster process.

You should be able to extract the SVG really easily from the fontawesome-webfont.svg file, and colorize those with simple css e.g. fill: #ff0; The svg font file contains SVG path elements as glyph elements.

In light of what I said, why is SVG support "Pro" feature?

We're doing a lot more than just SVG support. Our goal is to make them as easy to use as icon fonts. That means you can auto-inherit color, size, drop-shadow, etc. And more.

(And the SVG font file format automatically flips the icons. So you'd need to invert. TOTALLY doable, if with a good bit of effort.)

But how often do people share attributes between fonts and icons? And how often do you need to inherit attributes that way?

I'm not sure why an icon font would be easier to use than SVGs. Yes, you only have to reference a file once (the font file), but that actually makes it more difficult to use, because now you have to remember two things: how to reference the file, and how to reference the icon.

With SVG, it's simpler, because everything is usually contained in one CSS rule. Yes, it has a reference to a file, but does that matter from the viewpoint of simplicity? I.e., make another icon? Then just copy a CSS rule and edit it.

Also, using an icon font makes it difficult to substitute a single icon by another icon. Suddenly, you have to start rearranging your CSS. With SVGs not so: just edit the referenced url.

Anyway, I love the font-awesome graphics. Except for a few icons, such as icons containing people (they look too bulky and inelegant, for my taste). But most icon-sets don't get people-icons right.

> But how often do people share attributes between fonts and icons?

Often.

You can use fontello.com to build your custom set of fonts ;-)

If included, in full, via a CDN, wouldn't this be mostly cached? (I use bootstrapCDN)

Correct!

(I know for some folks they just like having all their static assets in one place so there's just a single point of failure.)

Don't include all the icons then.

I parse my CSS file (I embed content:"\f..." strings instead of fa-... classes) to see what I'm actually using and then hack up the font file to only include those characters.

The how is a little technical but I've gone through it here: http://askubuntu.com/q/557980/449

And it's definitely worth it. Most of my sites' FA files are under 2KB.

That's why they introduced FortAwesome where you can just take the glyphs you want. Not free though.

PNG? I think you mean SVG :)

Now that Pro is SVG, it's super-easy to subset yourself.

Reply on news.ycombinator.com