CODEWITHSUNDEEP
htmlsvgfont-awesome
Yarin
Yarin

Reputation: 183889

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>

Upvotes: 117

Views: 115007

Answers (8)

Angie
Angie

Reputation: 1545

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

enter image description here

Upvotes: 125

muah
muah

Reputation: 129

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

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

Upvotes: 11

Orlandster
Orlandster

Reputation: 4868

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.

Upvotes: 5

tomByrer
tomByrer

Reputation: 1155

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.

Upvotes: 9

John Dangerous
John Dangerous

Reputation: 185

You can download them from flaticon.com here:

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

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 124219

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

Upvotes: 76

jedierikb
jedierikb

Reputation: 13109

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

Upvotes: 18

jedierikb
jedierikb

Reputation: 13109

IcoMoon app makes this dead simple.

Upvotes: 24

Related Questions