html5 - pseudo - font awesome ttf
Extrayendo SVG de Font Awesome (7)
Acaba de obtener los iconos de svg listos de este repositorio github
Ya están volteados y centrados según sea necesario
Presione cualquier archivo y luego "Raw"
Quiero obtener los datos de la ruta SVG de los glifos Font Awesome para que pueda 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 Fiddle )
Fuente Awesome SVG:
<glyph unicode="" 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>
Puede descargarlos de flaticon.com aquí:
Simplemente puede descargar la última versión de fa aquí: https://fontawesome.com/
Y luego vaya a la carpeta de advanced-options/raw-svg . Allí encontrará tres carpetas de brands , regular y solid contienen todos los últimos íconos disponibles.
También hay una herramienta node.js que automatizará esto por ti, y crea un antes y después de verify.html . https://github.com/eugene1g/font-blast
Lo he usado en otras fuentes, solo 1 conversión de icono malo hasta ahora, pero el resto en la fuente SVG estaba bien.
Todo por 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 fuentes SVG, junto con el sistema de coordenadas inicial para los glifos, tiene el eje y apuntando hacia arriba para coherencia con la práctica industrial aceptada para muchos formatos populares de fuentes.
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 hacer el truco, donde 1792 es las unidades-por-em y 1536 es el ascenso en el elemento de la fuente-cara
Use 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
La aplicación IcoMoon hace esto muy simple.