Extrayendo SVG de Font Awesome

Quiero obtener los datos de la ruta SVG de los glifos de Font Awesome para poder usarlos directamente como SVG en mi HTML. Pensé que sería tan fácil como copiar y pegar los datos de la ruta de fontawesome-webfont.svg , pero cuando lo uso en mi HTML, todos los símbolos se muestran al revés. ¿Alguien sabe por qué?

(Ver violín )

Fuente 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" />

... Portado a HTML SVG (y reducido):

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

Todo según la especificación SVG ...

A diferencia de los gráficos estándar en SVG, donde el sistema de coordenadas inicial tiene el eje y apuntando hacia abajo, la cuadrícula de diseño para las fuentes SVG, junto con el sistema de coordenadas inicial para los glifos, tiene el eje y apuntando hacia arriba para mantener la coherencia con la práctica aceptada de la industria para muchos formatos de fuente populares.

Según este comentario , cambiar el contenedor a <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>parece funcionar, donde 1792 es las unidades por em y 1536 es el ascenso en el elemento font-face

Simplemente obtenga los íconos svg listos de este repositorio de github.
Ya están volteados y centrados según sea necesario

Presiona cualquier archivo y luego "Raw"

La aplicación IcoMoon hace que esto sea muy simple.

Utilice el script fontforge. Hay un script que encontré en línea aquí :

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

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

También hay una herramienta node.js que automatizará esto por usted y creará un antes y un después verify.html. https://github.com/eugene1g/font-blast

Lo he usado en otras fuentes, solo 1 conversión de icono incorrecta hasta ahora, pero el resto en la fuente SVG estaba bien.

Simplemente puede descargar la última versión de faaquí: https://fontawesome.com/

Y luego ve a la advanced-options/raw-svgcarpeta. Allí podrá encontrar tres carpetas brands, regulary solidque contiene todos los últimos iconos disponibles.

Puede descargarlos de flaticon.com aquí:

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

Puede descargar cualquier svg de Font-Awesome que necesite de su repositorio en Github

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