Extracting SVG from Font Awesome

Question

I want to get the SVG path data from Font Awesome glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data fr

Answer 1

You can just download any Font-Awesome svg you need from their repo at Github

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

Answer 2

You can download them from flaticon.com here:

http://www.flaticon.com/packs/font-awesome

Answer 3

All per the SVG specification...

Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

As per this comment, Changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> seems to do the trick, where 1792 is the units-per-em and 1536 is the ascent on font-face element

Answer 4

Use fontforge script. There is a script I found online here:

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf 

See: http://fontforge.sourceforge.net/scripting.html

Answer 5

IcoMoon app makes this dead simple.

Answer 6

Just get the ready svg icons from this github repo
They are already flipped and centered as needed

Press any file and then "Raw"