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 haven't dug deeply with own font-icon sets, but I assume there's some svg data in use.

Just as an idea of a different way to go- you could even use background-img on set classes :before / :after

useful resource: http://iconizr.com/ I find their data-url generation is useful (better svg conversion than fontello, icoMoon )

Answer 2

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.

Answer 3

I believe you can use FontLab Studio for that: http://store.fontlab.com/

However, you will probably have to write your own css, personally I think generating it with icomoon or similiar web based generator is much easier and faster, because it is made particularly for generating web fonts, in before FontLab Studio or similiar desktop applications were made to design desktop fonts and do not come with prebuilt css compiler/generator.

I would like to see a generator for desktop aswell.