Extracting SVG from Font Awesome

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 from fontawesome-webfont.svg, but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why?

(See Fiddle)

Font Awesome SVG:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... Ported to HTML SVG (and scaled down):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

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

Press any file and then "Raw"

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

IcoMoon app makes this dead simple.

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

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

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

There is also a node.js tool that will automate this for you, & create a before & after verify.html. https://github.com/eugene1g/font-blast

I've used it on other fonts, only 1 bad icon conversion so far, but rest in the font SVG was fine.

You can simply download the latest version of fa here: https://fontawesome.com/

And then go to the advanced-options/raw-svg folder. There you will find three folders brands, regular and solid containing all the latest icons available.

You can download them from flaticon.com here:

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