Extrayendo SVG de Font Awesome

89

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>

html svg font-awesome

— Yarin
fuente

62

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

— Robert Longson
fuente

6

Para completar esta respuesta, cambiar el envoltorio a <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>parece funcionar, donde 1792está el units-per-emy 1536es el elemento ascenton font-face.

— mckamey

Re 1792 is the units-per-em: error tipográfico Creo que 179.2coincidiría con la altura / ancho.

— Nate Cook

99

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

ingrese la descripción de la imagen aquí

Presiona cualquier archivo y luego "Raw" ingrese la descripción de la imagen aquí

— Angie
fuente

10

Encontré que muchos de estos tenían íconos recortados a los lados, por ejemplo, automóvil

— Bankzilla

21

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

— jedierikb
fuente

2

Sí, IcoMoon es increíble

— Yarin

3

IcoMoon es muy fácil de usar, pero descubrí que exporta rutas más largas que los SVG en este repositorio de GitHub . Prueba a comparar el icono de fa-gift. Son path837 caracteres a través de IcoMoon, frente a 514 en el repositorio .

— Dan Dascalescu

Buen hallazgo Dan, no tenía idea de esta advertencia. Aún así, amo IcoMoon.

— SISYN

13

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

— jedierikb
fuente

7

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.

— tomByrer
fuente

2

Voy a tener que probar esto

— John Dangerous

font-blast super rápido y fácil

— 00-BBB

4

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.

— Orlandster
fuente

3

Puede descargarlos de flaticon.com aquí:

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

— John Dangerous
fuente

Puede ser útil, pero cuando desea cambiar el tamaño de una ruta de 512x512 a 20x20, se requiere una gran cantidad de combinación de botones de reducción de escala

— nicolallias

3

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

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

— muah
fuente