Using Fontello is a dream. I have selected a total of 99 icons that are the core of what I used with Font Awesome. Instead of loading over 1.8 Mb of data with Font Awesome, I am able to access all the icons I need at a total of 24Kb with Fontello. That includes a minified CSS file and the font file.
The Fontello create process allows for a custom font name. I've named it exactly the same as Font Awesome so that I do not have to change previous setups and installations.
There are two downsides. The icon names (works out to css class names) in Fontello are different that Font Awesome. So are the codes.
I decided to create a small project to modify the Fontello font and css files to match the names and codes of Font Awesome. While working on that, I also decided to modify the Fontello "demo.html" file so that it displays in alphabetical order. Makes the search for the right icon a bit easier.
Fortunately for all of us, Fontello makes that all fairly simple. I need to point out this is a two step process that involves creating/downloading and recreating/redownloading the Fontello json file. The json file is like a database of records of your inteaction with the Fontello Create Font process.
The first step is to select all of the icons needed. In my case that works out to 99 icons.
Once I downloaded the Fontello package, I manually modified the Fontello config.json file to match the Font Awesome icon names. In the Fontello config.json file, the icon names are shown but without the starting "fa-" portion. It took a bit of research to handle that ... fortunately, not that time consuming. To help in the process, I did a file read of the font-awesome.css file and created an array that included the icon names and icon codes. While I was at this stage, I created four new arrays that segments the icons into: Directional, Forms, Navigational, and Social categories.
Once I had the font-awesome icons in an array, I was able to do a look up and match the Fontello names with the Font Awesome code. Fontello stores the code in decimal format, Font Awesome stores it in hex format. PHP has a hexdec() converter (hex to decimal) and a dechex() converter (decimal to hex) to facilitate that process.
I converted the Fontello config.json file to a PHP array. Once in an array, I pulled out the icons portion and modified the names and codes as needed. I then sorted the array in alphabetical format, and then replaced it in the original array and then converted that back to a new config.json file.
That completed step 1.
Step 2 is to upload that to the Fontello website. And then download the new package with my modifications. Once I did that, I had the final config.json file, and the final font file and demo.html file.
Once I had that, I created a script to create a "cheatsheet" based on the original demo.html file. Mine displays the same way, but is sorted alphabetically and displayed in five categories. That is the original four I created above, plus the "general" catch-all of the remnants that don't fit into the original four.
Oh, I did one more thing in this creation/re-creation process. The twitter icon available through Fontello is the old one from prior to the name change to 'X'. I modified that to display the new X logo.
The Fontello package includes the font file in five different formats, six different CSS files (for different purposes), a config.json file, a demo.html file, as well as license and readme files. Since the fontello css file is not minified, I minified it with one of my scripts. That reduced the CSS from 7Kb to 4Kb. I reduced the font files to one single format ("woff2") that supports all current major browsers. It does not support IE or Opera Mini (it does support all other Opera versions) ... a segment not supported by my package. I think supporting the vast majority of the market is a fair trade off for such a dramatic file size streaming savings.
Note, by the way, Opera Mini doesn't support any font file format.