Extracting SVG from Font Awesome

html svg 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>

Angie

UPDATE 2022 thanks to Chris Aelbrecht comment below: official repo has the SVGs of the latest version for download

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

original answer:

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

https://i.stack.imgur.com/c7hW4.png

I found a lot of these had icons that were cropped on the sides, for example car

Version 5 can be found here github.com/FortAwesome/Font-Awesome/blob/master/svgs

Community

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

For completeness of this answer, 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.

Re 1792 is the units-per-em: Typo? I would think it would be 179.2 to match the height/width.

jedierikb

IcoMoon app makes this dead simple.

IcoMoon is very easy to use, but I've found that it exports longer paths than the SVGs in this GitHub repo. Try for comparison the fa-gift icon. The path is 837 characters via IcoMoon, vs. 514 in the repo.

jedierikb

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

muah

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

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

tomByrer

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.

Orlandster

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.

John Dangerous

You can download them from flaticon.com here:

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

Can be helpful, but when you want to resize a path from 512x512 to 20x20, it requires a lot of scale-down button-mashing

Extracting SVG from Font Awesome

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US