Building font-awesome icons

Question

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 they build files within the fonts folders. On github I found this repo, 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.

Answer 1

I actually did something similar but have to admit it was never perfect, most likely due to bad font conversion, just never had time to make it perfect. Basically i used the following link (to the most part)

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

An overview of the process

Step 1 - Create the individual gylphs (you should use the special characters to avoid someone "typing" using your font.

Step 2 - Save gylphs selection as an SVG font.

Step 3 - Convert SVG font to web-font (there are plenty of free online converters)

step 4 - generate the CSS classes to use (create all of the possible classes for all individual glyphs) - outcome should be something like: "icon icon-lg icon-blue icon-hand" - (better using LESS / SCSS for this part - you'll get why later) where one contains the general settings for all icons, the other controls size-overrides, one controls the color, and most important one that using the :after -> outputs the icon.

step 5 - now that you have a working web-font controlled by CSS, make a UI for selecting individual glyphs to be available. most likely you should use LESS, this way you are "exposing" only the classes that are selected by the user (EG. - icon-1, 2, 5, 8 etc) all other icons are still included in the font but their corresponding CSS classes are not outputted in the final CSS.

There might be more advanced ways of doing it but this overview and tutorial should help you get the basics.