Font-awesome: How to build font-awesome icons subset.

[brunano21]

I would build my own font-awesome icons set. In particular I would build something which is a copy of font-awesome with all its features, but using just a subset of icons.

Furthermore, I'm really interested how you build files within the fonts folders. On github I found this repo (https://github.com/encharm/Font-Awesome-SVG-PNG), which contains all svg icons. On ubuntu, using Font Custom, I was able to generate giving svg files as input, the fonts file, even if I'm not really satisfied. But besides that, I do not understand how to merge those files with font-awesome.

So summarizing, how can I create my own font-awesome set, using my own svg files?

Please, do not say to use fontello, icoMoon or similars, because I would like to do on my local machine, without any third-parties services.

Cheers!

[tagliala]

Hi,

Take also a look at this project https://github.com/nyon/fontawesome-actions

I also wrote this wiki: https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

Feel free to improve that wiki if you have some suggestions

I will leave this open

Hope this helps

[brunano21]

Thanks for replying me.
However, I already had a look to the Customize-Font-Awesome wiki, and in particular to the hard way, but unfortunately it does not show how to build a font-awesome framework from scratch. Let's suppose we have all svg files where each contains just an icon. After that, what the process to build everything is? Any other guide? or process guidelines? In other terms: what happens when a new icon is ready to be added to font-awesome?

Thanks

[tagliala]

when what happens when a new icon is ready to be added to font-awesome?

Dave develops Font Awesome via the .otf file (and this is one of the reason why we cannot accept PR containing icons), so there isn't a script that given a set of individual svg files builds an icon font.

He probably uses an approach like: https://github.com/blog/1135-the-making-of-octicons, as described in the above wiki

I know there are some other font that use an open build process (request here: #3065) but I can't remember the name, sorry

[brunano21]

Hi @tagliala,
I have investigated a bit about the question above, and what I was able to do was to build some fonts files starting from svg files. For that first I downloaded svg files from Font-Awesome-SVG-PNG repo, then I used grunt-webfont in order to build fonts. I used the following task configuration for grunt-webfont.

grunt.initConfig({
  webfont: {
    icons: {
      src: 'icons/*.svg',
      dest: 'build/fonts',
      destCss: 'build/css',
      options: {
        font: 'myfonts',
        hashes: false,
        styles: 'font,icon',
        types: 'eot,woff2,woff,ttf,svg',
        order: 'eot,woff2,woff,ttf,svg',
        syntax: 'bem',
        stylesheet: 'css',
        templateOptions: {
          baseClass: 'icon',
          classPrefix: 'icon-',
          mixinPrefix: 'icon_'
        },
        engine: 'node',
        startCodepoint: 0xF101,
        autoHint: true,
        round: 10e12,
        fontHeight: 1792,
        descent: -256,
        callback: function(filename, types, glyphs) {
          console.log("FILENAME: " + filename);
          console.log("TYPES: " + types);
        }
      }
    }
  }
});

Of course the result is much far away from font-awesome, and I know this is not the best solution, but at least it's something until @davegandy say 'Hello' about the build process. Thanks to @encharm and @sapegin for their work!

[tagliala]

thanks for sharing this

[allanwhite]

Can also strongly recommend using IcoMoon's web app for creating custom icon fonts. There's SVG, PDF, png and other options. Great way to normalize a bunch of icons.

[nazar-pc]

In case anyone is interested, I've created yet another Docker image for this purpose: https://github.com/nazar-pc/docker-subset-font
Basically, you specify CSS file and WOFF2 font file and WOFF2 file is updated to only include used icons. Can be tricky if you have multiple fonts in one CSS file, but you can bake custom CSS file if needed.

There is also slightly different image in case you want to split font file into multiple files by unicode ranges: https://github.com/nazar-pc/unicode-range-splitter