How can I edit Font Awesome (or include my own icons)?

35
votes

Font Awesome is fully open source, so how can I tweak some icons as I wish, or add new icons? Let's say my primary vector tool is Inkscape (open source GPL).

The fontawesome package comes with files *.eot, *.otf, *.svg, *.ttf, and *.woff. The svg file does not successfully open in Inkscape. What program(s) can be used to edit these?

And once I edit the fonts, what guidelines should I follow? What unicode characters slots should I use? What should I be aware of when editing LESS source code to include new icons?

I'm not necessarily interested in submitting new icons to the official repo, I just want to fork and mutate it a bit, rather than having a couple of my own icons loaded ad-hoc.

4
svgfontsfont-awesome
possible duplicate of Add custom icons to font awesome – ctbrown
answered a duplicate question here: stackoverflow.com/questions/11426172/… – Samuel Bergström

4 Answers

47
votes

You can use icomoon. Browse to the library page and use FontAwesome, you can augment FontAwesome's libary with your custom icons in SVG.

10
votes

As well as the solution mentioned (which is perfect), you can also subset and combine icon fonts using:

  • icnfnt (officially supported subsetting of font-awesome icons - original .com now a dead link, but the github repo is still available)
  • fontello.com (create a custom subset from a number of icon fonts that are widely available)
9
votes

If you want access to the raw svg and .png files, there is a git repo for that: Font-Awesome-SVG-PNG

2
votes

If you want some icons (or all) from font-awesome including yout custom svg icons you can:

1- Go to http://fontawesome.io/ Download the zip and extract-it for example in your Desktop.

2- Go to http://fontastic.me/ use your email to create an account.

  1. Once you have been logged-in click on the header option: Add More Icons.

  2. Select the SVG of font-awesome located in your extracted zip inside fonts.

  3. Repeat the procces uploading your own svg files.

  4. Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.

Sorry about my english ! :D