Font-awesome: Dividing FA into packs

[smartcorestudio]

Sorry for a possible dupe.
I think that it will be a good idea to make separate icon packs from FA, hosted on CDN alongside with thе main FA. Something like Bootstrap has with their JS. We can use universal combined bootstrap.js, but also we can use separate files like "bootstrap-modal.js", "bootstrap-typeahead.js" etc.
FA can also be separated in "core", "currency", "brand", "directions" etc. Moreover it can be separated in "bootstrap pack", "jqueryUI pack" and so on. So users can choose between using individual packs or combined FA.
I know that there are services for making personal fonts by choosing individual glyphs and downloading the resulting font file, but I think that including CDN-hosted packs will be better solution for some cases.

[tagliala]

I'm against this mainly because it will lead to bad practices.

We can use universal combined bootstrap.js, but also we can use separate files like "bootstrap-modal.js", "bootstrap-typeahead.js"

Those are the source files. They have to be merged and minified for a production environment in order to reduce at the minimum the number of http requests. In fact, bootstrapcdn serves the whole .js file: if you need a custom version, you need to customize according to your needs and host it by yourself.

Having multiple modules hosted by a cdn will work only in some cases (e.g.: you need only brands or only directions)

If you need a custom FA build, consider fontello.com, icomoon.com, fontastic.me

@davegandy?

[rayshan]

I'd like to revisit this topic. With 439 icons and 86 brand icons in the latest 4.1.0, a need for modularizing should be argued. A popular use case for using font-awesome is to build web apps. Many non-brand icons can come in handy in any web app, but brand icons are very specific and most users are likely to use very few, if any. I propose the below builds for distribution:

• All icons (always providing this will mitigate @tagliala's concern)
• Non-brand icons only
• Brand icons only

For users needing further customization, they can use one of the many icon font custom build generators.

[smartcorestudio]

+100. http://www.icnfnt.com/ supports only FontAwesome 3.0.2

[zeroxme]

+1

[jvanasco]

Originally posted in [https://github.com/FortAwesome/Font-Awesome/issues/3869]

This general has been brought up in a few other contexts, and it is possible to customize FontAwesome using a third-party program. But... the library is getting too big and brands support seems to be the culprit.

Font-Awesome 4.1.0 breakdown:
439 total icons
86 brand icons
105k minified

Font-Awesome 3.2.1 breakdown:
361 total icons
44 brand icons
66k minified

Font-Awesome 3.1.0 breakdown:
302 total icons
15 brand icons
79k minified

By comparison -- te bootstrap icons, which I believe this package originally grew from, are under 30k minified.

We now have a large percentage of icons that are brands, and this has been steadily growing -- at a rate faster than the rest of the package. The brands have nearly doubled on each release, and a large percentage of the current "icon requests" and "completed work" are for brand support. While these are useful, most people will not need more than a few (if any). The brand icons are becoming increasingly esoteric and niche -- there are multiple variants for several brands, a suite of Star Wars emblems, and several regional social sites.

While it is possible to customize FontAwesome using 3rd party tools -- nearly 1/5 of the library is something that people just aren't going to use.

At the current rate of growth and an increased uptake in Mobile usage, FontAwesome will need to be customized by developers. Having all the brand icons in the core distribution now is semi annoying (only about 20k); when the number doubles and triples... it's going to start creating issues and people are going to need to create custom distributions -- reducing the utility of the global CDNs. The library's size is already so large that I can't reasonably trust a user has already loaded 105k from the "global" CDN; so I've been migrating to custom stripped-down versions (20k range). I know an increasing number developers who have done the same.

Before the brand support gets out-of-control, I'd like to suggest some long-term growth planning happens now -- such as migrating brand icons away from font-awesome (font+css) and into font-awesome-brands (font+css). Everything would be released / distributed the same. This would just give people an automatic option for not having to include all of the brand icons -- or require less customization.

While it is true that this would create 2 new HTTP requests, I think we're about at the point where an additional 2 requests will have less of a performance impact than an optimized load. Also, separating the "core" from the "brands" could mean more people relying on the CDN version of "core" as it is not bloated.

Beyond that, I STRONGLY think there should be some general guidelines developed now for keeping the size of the "core" distribution down to a reasonable number -- and plans for how/when to spin off sections.

[Sophist-UK]

+1 for separating into a separate brands font.

Also, I would suggest that FA includes complete sets of the standard icons defined by major platforms like drupal, wordpress, joomla.

[dangnelson]

+1

[craigniara]

+1

[Schlaefer]

:+1:

[renarena]

+1

[tagliala]

Take a look here for subsetting the font: https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

[jvanasco]

Subsetting the font is not appropriate - it's a rather advanced topic.

This package is extremely bloated. The brand icons should be stripped out.

[itsjavi]

:+1: I am totally agree with @jvanasco

[jvanasco]

Fontawesome 4.4 has 585 icons, 136 of which are brands. That means that roughly 25% of the download is bloat.

Congrats, this package is increasingly becoming irrelevant.

[Sophist-UK]

I think it is a bit unfair to consider all brand icons bloat. The majority of web sites now want integration with e.g. Twitter and / or Facebook so these cannot be considered bloat. However, there are undoubtedly a lot of minor brands that could be moved into a font-awesome-brands font.

The difficulty, of course, will be to decide which are commonly used enough for them to be in the main font, and which are in the minority and should be in the brands font. And of course, all brands start off being minor, but some of them become endemic, though eventually some of these will perhaps fall into disuse.

I don't think that there is any choice which will satisfy everyone. Because of the difficulties of deciding which brands are important enough to go in the main font and which should stay in the brands font, the decision will be made to put all brands into the brands font. Then people will point out that the majority of sites use at least one brand, and so have to download the whole brands font, which is less efficient than having a single font, so the decision will be taken to go back to a single font, and we will be right back where we started.

So, perhaps best to accept that a single font is best, and instead to find a way to provide an automated tool to allow individual web sites to create a unique subset of icons that they use on their own site.

[jvanasco]

Not all are bloat, but most are. Few people will need 100+. This is a longstanding issue that is increasingly getting out of control -- there are now 10x more brand icons than the 3.x branch, and more are being added in with no plan other than "Toss them in!"

There are many ways to approach this, such as using logical groupings that could/SHOULD be subdivided out -- making packs like:

• Social Media - Core

• Social Media - Other
• For Developers
• Payments
• Regional
• Gaming
• Corporate icons of narrow usage.

Having multiple files is necessary. FA is a rather large load that is adding on 10s of KBs every release. Because everything is tossed into the single font, using the common CDN is now of limited usage -- why use hope that a VERY LARGE file is cached on a browser via a CDN when you can use 3rd party tools to cut out 50% ? When you're dealing with pushing content to a mobile device, 50k in fonts/css makes a noticeable difference in time and browser performance.

[Sophist-UK]

Agreed -but having multiple font files will bring its own problems.

So perhaps tools which will create a smaller subset font file as well as LESS / CSS files to match. And maybe mapping missing icons to a special icon-missing icon to indicate this.

Then people can choose which icons they want.

[jvanasco]

You can use existing tools to make subsets, but that requires a bit of advanced knowledge. Even many large "professional" sites with lots of traffic don't use this approach.

A better way would be to make official "packs" and "combinations", then have a tool that merges them.

If FA were half the size it is, an "opt-out" approach would make sense -- but at the current size, an "opt-in" would likely be better.

[Sophist-UK]

That makes sense.

[migig]

+1 It's getting out of control. A year from now some of those brands won't even exist anymore.

[GFargo]

+1

[jvanasco]

Hey this package is still really bloated.

[smartcorestudio]

I've created subset from the original Font Awesome 4.5.0 in FontForge app. I've dropped most of the brand icons and some of very exotic and rarely used icons. This resulted in the following filesizes:
woff2: 44K
woff: 58K
ttf: 103K
CSS: 27K
CSS(min): 22K
I've tested this subset in my projects and fidn't find any problems with it. Here is the link:
http://smartcore.ru/fontawesome.zip

[My1]

+1 too. I think this is getting seriously out of control.
I dont know whether there are any guidelines but when ~90% of the brands are some that I never even heard of then well...
also the font customizers usually have the great problem that all want their own CSS classes and manually rewriting everything to match fa again, no thanks. also as much as I like the Idea of fortawesom/fonticons as a customization tool by the fa devs, I personally dont want to pay for a million of pageviews when I want to download and serve the file by myself in the first place.

[My1]

@tagliala also a question: are there ANY rules regarding brand icons about what should be added etc.?

Both the wiki and the contribution guidelines say literally nothing about brand icons.

and as I said the whole brand icon thing is seriously getting out of control. we have 2536 open "new icons" issues and out of those we have 1043 new brand icons (plus the not yet tagged new and/or new brand icons) right now.
considering we have 158 distinct brand icons (I counted) out of 628 distinct icons (according to the FA main page), IF all the requests would be granted and every request has only one icon we get 1201 out of 3164 icons as brand icons pushing the brand icons to more than a third of the whole set (~38%).

[EricGrange]

Having "official" standard packs is also preferable to customization because of common CDN (like cdnjs, bootstrapcdn, google, etc.)

When pulling the font from a CDN, the cache is shared with other websites, so the pack will often not need to be downloaded at all. The brand icons are then just annoying because of the noise when searching for an icon.
But if you customize or host the font on your own site, then it will need to be downloaded, so a customized font, even if smaller, can end up making your website slower.

[jvanasco]

Hey this is even more bloated.

https://docs.google.com/spreadsheets/d/1Kwj6Z_8Zz7WsJDgF7c5umrhIq8oDmottlCRDcSf6-XE/edit#gid=1118016787

The package is now over 25% brand icons and several times larger than the initial release

[My1]

well that it's a lot larger is also due to the fact that there are also a lot more normal icons but we can literally say that almost half of the new icons ever since 3.1 using your numbers out of 332 new icons we have 149 brands and 183 normal icons, this is quite a number to swallow.

[nazar-pc]

I think Font Awesome might just start using unicode-range to resolve this issue entirely and leave everyone happy :smiley:

It is well supported nowadays, so having icons split by categories or in some other way into blocks will allow to only have small overhead of loading few more icons from the same block, but not loading the whole font at once.

CSS can be also split into corresponding categories with own @font-face {..unicode-range: ..} and definitions of icons from that block. This way everyone will get what he/she wants and still there will be no fundamental separation of Font Awesome into several separate projects.

There will be multiple css+fonts files combinations, each for separate category/block and some master CSS that imports them all together (many people will use build systems to inline imports anyway + growing adoption of HTTP2 makes overhead even smaller, so this is not a major issue I think).

These are native features available within web platform today, why not use them?

@tagliala, @davegandy, what do you think about such approach?

[My1]

the intresting part of this is as I read the doc that only a part of the resource that's actually needed is downloaded, I didnt even know that that's possible.

[nazar-pc]

@tagliala, @davegandy want to ping in case you missed my previous comment for some reason.
It is pretty important, especially looking at number of icons that might be potentially added in future.

[chrismbarr]

Yes please. I have zero need for brand icons at all. Especially considering that the brand icons now even include *4 variations of the Pied Piper logo, which is a fictional company from a TV show!*

IMO, this could work in 2 ways.

:one: "Icons" & "Brand Icons" files

Like others have mentioned just allowing for an "All icons" download or a "most icons" & "brand icons" will solve a lot of issues. This lets it continue to work as it does today, and it allows it to be split up in a way to will hopefully satisfy the majority of people.

:two: More granular SCSS & LESS files

At the very least split up the icons SCSS/LESS files into icons.scss and icons-brands.scss to at least allow people to build their own copies. Sure the actua icon data will still be in the font file, but this at least gets rid of some extra CS bloat that might not be desired by everyone.

---

If people want really granular control over exactly which icons are included, that seems like a totally different concern. The people who want this (IMO) should create a custom build

[craigniara]

I’m in favor of the former approach for simplicity. A general font and a brands font. Maybe a compromise would be that the general font includes 10 or so popular brands (e.g. Facebook, Twitter, etc) but I’m also not thrilled by the ever-increasing list of brand icons.

On Jul 12, 2016, at 12:14 pm, Chris Barr [email protected] wrote:

Yes please. I have zero need for brand icons at all. Especially considering that the brand icons now even include 4 variations of the Pied Piper logo, which is a fictional company from a TV show!

IMO, this could work in 2 ways.

1️⃣ "Icons" & "Brand Icons" files

Like others have mentioned just allowing for an "All icons" download or a "most icons" & "brand icons" will solve a lot of issues. This lets it continue to work as it does today, and it allows it to be split up in a way to will hopefully satisfy the majority of people.

2️⃣ More granular SCSS & LESS files

At the very least split up the icons SCSS/LESS files into icons.scss and icons-brands.scss to at least allow people to build their own copies. Sure the actua icon data will still be in the font file, but this at least gets rid of some extra CS bloat that might not be desired by everyone.

If people want really granular control over exactly which icons are included, that seems like a totally different concern. The people who want this (IMO) should create a custom build

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/FortAwesome/Font-Awesome/issues/1322#issuecomment-232149470, or mute the thread https://github.com/notifications/unsubscribe/AGl0m7lvUnFk4RCFDZMpH9V-EXve0uFlks5qU-eQgaJpZM4AvSWY.

[jvanasco]

@chrismbarr There are multiple Star Wars icons, because of course!

[chrismbarr]

@jvanasco oh good, perfect for the internal customer management application we are working on!

[spaceneenja]

I was thrilled when FA was originally released and even more thrilled as they continued to diligently add icons. Best of all, it was all done for free! :heart_eyes:

Unfortunately, you get what you pay for. This library, while excellent for newbies to the field, has made itself irrelevant. It seems it's now just a marketing tool for no-name brands to build links and gain exposure within the bootstrap and web development community.

To hack on FA, I need Ruby. That is unacceptable. The bloat in font awesome has gotten to the point of embarrassment. This project should exist in a less/sass set of includes so I can specify the categories I want in my project and leave out all of the junk.

[My1]

I fully agree that it has now quite a lot of stuff and that there is, a too little amount of the more important icons. There are many icons of brands I've never seen of heard of before, like shirtsinbulk and whatnot but the more important and well known brand icons, like google Play are sitting in the issue list for half an eternity.

well, regarding a tool to make them in packs, they actually will put one in pro, and that is in my opinion very important because the pro version will have many more icons than the free already has, which on, full size, would be quite a lot of data to transfer, although, even though I did get FA Pro I would have nothing against it to have the seperation tool also for the open crowd,

also you might be able to use some online icons font builder to make fontawesome to only what you need.

[nazar-pc]

For those who are interested in unicode-range-based approach that I've suggested a year ago, I've just published a tool that allows you to convert monolithic font file into multiple files by unicode ranges as well as adjusting CSS file accordingly in one shot. Everything is packed into Docker container, so usage is slightly verbose, but very simple.

Give it a try: https://github.com/nazar-pc/unicode-range-splitter

[BorntraegerMarc]

@tagliala I would also raise the question one more time (as we are now in 2017): Why do the contributors of FA not agree with dividing the icons into different smaller modules? There is clearly a need for it...

[My1]

actually this is partly happening on FA5. at the very least the brands are getting split as far as I can see, and to top it for pro users there will be the subsetter.

[tagliala]

@BorntraegerMarc thanks for the question

Why do the contributors of FA not agree with dividing the icons into different smaller modules?

I would like to clarify that it was a personal opinion and I don't speak for all the Font Awesome contributors

There is clearly a need for it...

I (personally) still think that having a single file on the CDN and customization tools for those who need just a subset is a solid approach, suitable for the most of use cases.

The unicode-range feature pointed out by @nazar-pc is indeed very interesting. I think that it is a good approach to reduce font download size (on modern and supported browsers). I really hope that Dave will investigate on that for the next releases.

BTW, FA5 Pro and Font Awesome Black Tie do have a separate file for brands. I don't know if this will happen on FA5 Free too. I'm not so confident for the next major release, because FA5 is supposed to be backward compatible

[BorntraegerMarc]

Thanks for your answer @tagliala
I agree with all your points. But I guess our application is one of that "other use cases" -> we're deploying a medical app which needs to run on premise of hospitals. So we don't have connection to CDN's or external networks in general.

[tagliala]

So we don't have connection to CDN's or external networks in general.

You could host a custom version of FA on your own server, with just the style and the just the icons you need: https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

[robmadole]

Closing this as FA free has separate styles now. I think the spirit of this issue has been resolved.