Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 267
André Staltz Avatar asked Jul 30 '13 07:07

André Staltz


People also ask

Can you edit Font Awesome icons?

Font Awesome icons can be customized even further using your own CSS. We've even added CSS Custom Properties to our style toolkit options.

Can I upload my own icons to Font Awesome?

Now with the magic of Kits, you can upload your own icons and use them right alongside official Font Awesome ones! We'll cover the basics of uploading and using your own icons alongside Font Awesome.


2 Answers

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

like image 57
methodofaction Avatar answered Oct 24 '22 18:10

methodofaction


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)
like image 20
nickhar Avatar answered Oct 24 '22 19:10

nickhar