With all the buzz around GitHub’s switch to inline svg I thought I better publish my current icon font editing workflow while it’s still semi-relevant. No doubt I’ll be adopting full inline svg myself but someone somewhere may find it useful to stick with icon fonts for a while.
In this tutorial we’ll be working with ECMAScript2016 (ES6) so our Gulpfile will actually be gulpfile.babel.js. To begin we’ll add some config to our package.json.

package.json

"config" : {
 "files": {
 "fonts": "path/to/project/fonts"
 },
 "fontServer": "http://fontello.com"
 }

Here fontServer is fontello.com but if you are running your own, in-house font server you can change this to your server’s address or IP. Filepaths in a project are a constant, so in the gulpfile we’ll define them as such with const files = pkg.config.files;
Now for the gulpfile. Yours will likely have much more going on but for the sake of simplicity I’m including only the font related tasks.

gulpfile.babel.js

 

In the example above we have 2 gulp tasks for managing the font called “font-edit” and “font-save”. Running “gulp font-edit” from the Terminal calls fontEdit , which requests a new session from the fontServer which in this case is fontello.com. After the session is created the current font’s config.json is sent to the server and a chrome tab is opened to that session. We can now edit the font to our heart’s content.

When finished we click Save Session in the top right of the page and return to the Terminal so we can save the edited font to the project by running “gulp font-save”. Running the “font-save” gulp task calls the fontSave arrow function which first tests if the developer has unzip install. Without it we won’t be able to unpack the file downloaded from the fontServer. Most developers will have this on their machine though and continue on to pull the file, unzip it then base64 encode the font into a separate _font.scss file used by the project.

Note: Base64 encoding will increase the css file’s size but it will also:
* save on network requests to fetch the font files
* prevent the half-second where no icons are visible

Here is a video of this process in action on jQuery formBuilder.

So in conclusion, svg icons are still a good (probably better) way to go but if your project has an icon font and you need a simple way for your developers to edit that font, gulp and Fontello are still excellent options.