Font Awesome 5 | Hacker News Reader

Font Awesome 5

five.fontawesome.io

355 pointskauegimenes142 comments

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?

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.

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

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

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.

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.)

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.

PNG? I think you mean SVG :)

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

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.

The commercial is great! Who helped produce the video? I'd love to hire them for something like this.

Knox Avenue out of Los Angeles. Imagine getting a Sandwich Video made before they were astronomically expensive.

Ping me over email and I'll make an intro. Amazingly talented and honestly my favorite human beings I've met in the past month. CANNOT recommend them highly enough.

Out of pure curiosity, what's the ballpark cost of a commercial like this?

I haven't worked with this agency specifically, but it depends on a variety of factors - e.g. # of animations, actors/actresses, reshoots, reviews, etc. and how in-demand the agency is. It can usually run you low to mid six figures.

If I understand, Font Awesome paid >$100'000 for a video, in order to ask for $30'000 on kickstarter? Or do you think that this video was cheaper? (good will because of the open source nature of the project, or some other factor)

These videos can be done for lot less than 6 figures - avg branded video is 15-25k.

Are some of the people in the video actually working in fo[n|r]tAwesome, or are they all actors? I'm curious.

All actors. I don't think you want us on camera. :)

Is kickstarter the only way to donate/support fa ? Don't need pro, but would love to support you guys - thanks for your project!

Isn't it basically a ripof of dollar shave club?

Definitely an inspiration! Also Squatty Potty is a favorite.

Seems like a copy of the Dollar Shave Club commercial.

https://www.youtube.com/watch?v=ZUG9qYTJMsI

Though still well done.

Except that one is funny. Still well done though.

This video alone merits my support. Well done. Well done.

Aw, thanks. We had a LOT of fun doing it.

I like FA because

1) it's FA and looks alright as it is

2) can't beat free, so I don't need to worry about licenses for every single web project

A completely redesigned, larger, commercial library might be interesting, but it is a new project and has practically nothing to do with FA 4.

Font Awesome Free isn't going anywhere. Re-design is largely due to changing the base size to 16px which requires a re-design to keep pixel-perfection.

Thanks. Remaking all of FA Free sounds like a lot of work for little benefit, but I imagine it makes sense in the light of all the extra icons you're adding to Pro.

Honestly, the grid system in 4 is quite inconsistent, especially with vertical centering. But that happens over time with an open source project. Things wander each commit.

Been jonesing to start over for a while. Super excited.

Looking forward to it! Can't go wrong from a user's point of view, like this we get both FA4 and FA5.

Yes, I'd noticed that (my boss is a stickler for pixel-perfect vertical centering). Really happy that this will be addressed.

I had submitted an issue about the removal of the non-identifying direct CDN link to FontAwesome in favor of a user-identifying JavaScript embed, and it was closed. I tagged in to another issue to make the same point,

https://github.com/FortAwesome/Font-Awesome/issues/9245#issu...

Still no answer. Am I the only one that cares that the current state of FontAwesome encourages tying your email address (via a unique token) to your site's specific FontAwesome usage?

There are plenty of places to serve Font Awesome from a CDN for free. All the old options are there (and still listed in the documentation).

https://www.bootstrapcdn.com/fontawesome/ isn't going anywhere anytime soon.

(Also, 4.7 was released today with 41 new icons. If you had one of our unqiue CDN links, you'd be able to upgrade without pushing any code.)

Using plain svgs nowadays, never looked back.

Me too! I was all about FontAwesome for a while, then I discovered http://iconmonstr.com (which has far more icons), and now I just use the SVGs from there for everything.

Yes, using fonts for icons was always a wee bit of a hack. The only real major advantage over SVGs was easy sizing for being inline with text.

The implementation with the :before class definitely qualifies as a bit of a hack. No question.

Some of the icons themselves represent something of a universal language for websites. Using those symbols in a typeface is similar in some ways to character based languages like Japanese or Chinese. So I might argue that icons as fonts are quite an appropriate use.

The compelling feature of icon fonts over svg used to be IE8 support.

But then there was IE9 mobile, which didn't support @font-face. I remember coding detection for that, and creating a script that automatically generates png versions and the required CSS of the glyphs in use. Sigh.

I work for a corporate. A South African based company with inroads' in England and the USA. Should I donate in my personal capacity or ask the company to contribute? Yes, we use fa on our front-end projects.

The licenses follow the person or organization. If it's for a personal project, then you'd want to have one. If for the company, then the company would want one. :)

Well at least now I know why they've held back so many useful icons from the free version.

This one's a classic: https://github.com/FortAwesome/Font-Awesome/issues/1958

I feel the free version has been neglected ever since the commercial versions were born.

Also, there are too many unnecessary brand icons (e.g. skyatlas? houzz? most people aren't gonna use those).

Donated $5 anyways.

Appreciate the pledge! As it turns out, we get far more requests for brand icons than anything else.

And you're right. It is a bit neglected. That's why we're re-doing everything. :)

Have thought for awhile that fontawesome is excellent and was sucked in by the great kickstarter video - you get my first kickstarter backing!

Thanks for the kind words! We had SO much film writing and filming that thing!

I love fa, I don't see an explanation as to why it's necessary to redesign the set though. Does anyone know?

16px grid system is the biggest reason. Currently, FA is at 14px. To do it pixel-sub-perfect, we'll need to do it all from scratch.

Oh, and the icons aren't that consistent. It happens over time as you do 40-ish icons per release. It wanders a bit and you lose consistency.

We're fixing all that.

Treading dumb question territory, what's wrong with 14px to demand the switch to 16?

Mostly the base font size on the internet is changing. For instance, old Bootstrap 3 is 14px. New Bootstrap 4 is 16px.

That makes sense, thank you!

It has been 16px as default for as long as I can remember. People designed at 12-14px and it has been trending larger, 18-22px, for quite some time now - at least since 2012-2013. I think larger screen sizes plays a big part in the change, or maybe marketing people realized people dislike small text/prefer larger text? :)

Coders have learned that it's best to not touch the default font size, or resize html/body font size. The ugly 62.5% (16-->10px) is also dying out for accessibility reasons.

I haven't been following this space in a while. Can you shed some light on why the sizes are changing from 14px to 16px? On the kickstarter page it says it says the new size matches Bootstrap 4's global font size; is that the sole reason? (Edit: this was partially answered since but I'm curious)

I wonder, is traditional incremental versioning appropriate for what users perceive as a 100% stylistic change (notwithstanding the immense effort of a full rewrite of its internals). Do you intend to enhance Font Awesome 4 after the release of 5, or is 4 going to be EOL?

Big fan of Font Awesome - I use it for all my client projects. Just pledged $20 on the KS.

I'm a huge fan of Font Awesome and have been a user of it for years. I'm quite excited for the new version, and am proud to pledge for the development of FA5!

Any idea why there's no FA icon(s) to represent police, sirens, badges? Anything relating to civil authorities? (well, I guess there's some fire stuff).

We normally prioritize from top to bottom based on number of requests and upvotes. For these, there just haven't been enough.

I really like that icon category though. We'll add it to the potential stretch goal icon category packs.

Oh hey, thanks! It was not a complaint, but I wasn't sure if perhaps there were other factors (concern about representing life-saving activities via your icons, for example).

There are some security apps a family member is working on, and having some more related icons would help make his app better. We were talking about it this morning, and then this post arrived.

Thanks!

They are calling it pro as I imagine their other offshoot didn't work or make any money. It was that black bar at the top of the screen each time you go to the site. This makes sense, but maybe they shouldn't have tried to name it something different in the first place.

Even pledgers to the $5,000 tier have to choose between mug and t-shirt! Throw in a mug, will you? :p

No, they get 5! They get to choose if they want mugs OR shirts. :)

(Seriously, those mugs are going to be awesome. Enamelware lasts forever and we found this fantastic place to make them. They'll probably outlast me.)

You're tempting me now.

It says T-shirt OR Mug (x5) so I'm assuming you can choose any combination such as 3 shirts and 2 mugs.

Any ETA on when backers will get private repo access? Super excited for this!

We'll add folks when everything clears through Kickstarter. Should be just a week or so after the campaign ends.

Already have a huge start on things.

I just wonder how licensing for the pro version works in regards to open source projects? If I buy the license, can I use it for my open source project?

Also the option to commission your own icon is really exciting! :-)

I'd say just don't put the commercial version in a public code repo where other folks could easily use it. But if you avoid that, open souce projects would definitely qualify for our $20 non-profit license.

And Font Awesome 5 Free will be pretty awesome too. Your pick.

"if you avoid" - you mean if I just include specific icons from the Pro version?

Well, the real problem is that every resource is available for folks to use, even those that aren't intended (typefaces have the same problem).

Ping me offline. We'll get you something for the open source project you're happy with where you can use Pro.

Super! Thanks.

Just have to say, that Kickstarter video is hands-down one of the funniest I've seen. Wonder how much they spent on that.

I love how he just stands with his axe for a while in the end, taking in the room, and enjoying the bouquet of his glass of sprinkles.

I don't understand why someone would choose the student license over the small business one.

The small business license is only available for a limited time only.

Isn't the student one also for a limited time as well?

The Font Awesome Pro Business license (40USD) is more expensive than the Student license (20 USD). However, if you are an early backer for the Business license, you can get it at 20 USD.

Really cool video! Can anybody guess how much it may have cost them to make?

Can we get a backer reward to get both the t-shirt and mug?

Yes! Just add an extra $30 to your pledge and we'll take care of the rest during the survey phase!

Why are they running a Kickstarter if they actually have a "PRO" business model thing going? Shouldn't they just focus on building their business, instead of raising money? The video is cool-hip-quirky but... I don't get why they need to stick out their hands and ask for a handout here.

It appears that they are doing it for 2 reasons:

1. Using Kickstarter as a way to give PRO users a discount on their normal $40 rate. 2. Using Kickstarter as a way to market/announce their new business model.

If that's indeed why they are doing this as a Kickstarter then its a pretty great way to use Kickstarter, imho!

If it was just for marketing, then they should do marketing not fundraising.

Marketing a discount through Kickstarter is brilliant!

Though you may not agree with it, a lot of people use crowd funding as a mixture of fundraising, marketing, and market validation.

I'm not sure exactly which mix of benefits FA has in mind, but personally, I don't mind it.

And currently, they've gotten well over double their original goal - which is huge validation that the market likes what they are doing.

They give away tons of free stuff. They've earned the right to ask for some $$$.

I think the point was that they are asking for $$$ by having a "Free vs. Pro" business model (i.e. people pay $$$ for Pro), so where does the need for a Kickstarter campaign come from?

Because to have the free stuff, you need to dev it. To dev it, you need money to eat while you dev. So they ask money to live now, while they can code the free stuff.

Maybe they should treat it as a side project, and not as a job. When people treat open source projects as their day job everybody loses.

> When people treat open source projects as their day job everybody loses.

That's a new one. How does someone getting making a living while developing open source software mean "everybody loses"?

Yeah I don't feel like I lose because of Torvald, Stallman and van Rossum...

They have a "foundation" supporting their products. Before the foundation was conceived, it was started as a side project with no strings attached.

Because it causes burnout. You can't write open-source software as your primary day job well. There's too much risk.

You can, however, do it as a function of your work for your employer. Almost all of today's viable FOSS started like this, because it provides the financial security and moral support you need to bring a FOSS to maturity.

When you have a "Free vs. Pro" model, you usually structure it so that the Free version is subsidized by the money from the Pro version. So I don't think it's outrageous to be confused by someone having such a model, and yet still needing a Kickstarter campaign.

That's not to say there is something wrong with it. It just seems confusing at face value.

I'm not really sure why the idea is such a foreign concept to the point where you need to insinuate that I think that Free software "falls from the sky" or some such nonsense.

And to get started with the Pro version, you need a pro product. How do you finance kickstarting this product?

The only ROI you are entitled to when open-sourcing a project is advertising. It doesn't entitle you to ask for a handout.

> It doesn't entitle you to ask for a handout.

Good thing they're selling a product then, not asking for a handout. And hey, as a bonus, they're releasing a fully refreshed set of icons for free!

Your perspective on what open-source can/should be is utterly unrecognizable to me. I'm glad it seems like the majority of people are finally getting comfortable with the idea that you shouldn't have to choose between making a living and contributing to the open source ecosystem.

They totally lost me when the video announced a PRO version. Sorry, you can't claim to be open source while a few seconds later showing a paid-for version. Shame.

Open source doesn't necessarily mean free

There are actually tons of companies that do this, and it's a great business model that works well for everybody.

Exactly. It's really having your cake and eating it too.

They need to choose between: 1) If you're gonna raise money, then release all your work for free. No "premium" icons. 2) If you're gonna have a freemium-premium model, then don't have a fundraiser and get others to underwrite your risks.

Oh no! They lost your $0.00!

I reckon this is pure promotion. That video was pretty slick and I doubt it cost less than $30,000 to produce – writer, camera crew, actors, director, lighting, bakers, etc.

It was less.

This "pro" version is different than the one they offer on their site. Pro Font Awesome VS Pro Fort Awesome. Fort Awesome already includes many of the features in Font Awesome 5.

As I write this I see 92,108 reasons why they did this, plus a lot of us talking about it. It simply works for some projects and they took the chance that it would work for theirs, and if it didn't, it would of just cost them some time and whatever that video cost them.

Because —like many Kickstarters— they want paying for their time before they do the work.

I'm sure they don't need to do that but if you've already got the following to allow it, why not take the opportunity to ramp up the buzz?

It also puts some focus on the much-ignored professional versions. Most people have been happy to use the free versions. This draws attention to the fact that designing things takes time and that is worth something.

Still no Node.js or npm icons after almost 3 years? Thanks but no thanks.

-- Edit: not trying to be sarcastic or blaming anyone. I'm saying what I feel about Font-Awesome. If you don't like my thoughts, you just have to live with that. As a member of the community, I guess I also have rights to ask for something, which I do, and I guess I also have all the rights to talk about something that I've been waiting for, for a long time.

Thanks for the downvotes. I hope you can ever understand what was written in the future before downvoting it.

lmao. the whole library is worthless then?

No, I didn't say that. But in any case, there's no actual use for the whole library besides from some specific cases. So, I need around 10 of them most of the time and 2 of the ones that I need are not there yet. I guess you can imagine the situation now.

We prioritize based on number of upvotes. Most everything in 4.7 was over 100 upvotes and some even almost at 300.

In FA5 we're adding a good number more brand icons. Entirely possible they make it in.

Wow, didn't know that. At least for the 100+ part. Thanks for the clarification.

"I guess I also have rights to ask for something, which I do, and I guess I also have all the rights to talk about something that I've been waiting for, for a long time."

Yes, you do. You can also ask for it in a reasonable way instead of being a dick, which led to the downvotes in combination with your excessive arrogance in the edits. This isn't that hard to figure out.

Support it at the $200 level and you can have them add whatever icon you like.

It took seeing how dismissive people are of a great, free resource to realize I needed to donate just to spite such silly entitled commentary.

Thanks for providing the motivation, random entitled community member! =)

Now I just need to figure out what to get with the new, custom icon reward...

Reply on news.ycombinator.com