Agregue iconos personalizados a la fuente impresionante


138

Me encanta la fuente del ícono Font Awesome y quiero usarla para la mayoría de los íconos en mi sitio, pero hay algunos íconos de svg personalizados que necesitaría además de lo que se ofrece.

Noté que la versión .svg de Font Awesome se compone principalmente de estos <glyph />elementos:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

¿Sería efectivo tomar mi código de icono de svg, pegarlo como un nuevo elemento de glifo y asignar un carácter unicode no utilizado?


2
encontraste una solución? o simplemente elegiste otro taponamiento?
Michel Ayres

1
No se encuentra el enlace para la versión '.svg de Font Awesome'. Por favor actualice.
Yannis Dran

2
Aquí está la documentación relevante: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
Rimian

Respuestas:


125

Prueba Icomoon . Puede cargar sus propios SVG, agregarlos a la biblioteca y luego crear una fuente personalizada que combine FontAwesome con sus propios iconos.


¡Gracias, esto ayuda demasiado!
Johnny Zhao

Gran servicio. Gracias por eso. Se generó un conjunto de iconos personalizados a partir de svgs en poco tiempo.
Nodoze

Buena herramienta Perfecto. :)
Christian Mark

2
Hola, he generado iconos de fuente con una carpeta que contiene iconos svg. Pero luego quiero agregar un solo ícono, ¿es posible agregar? o de nuevo tengo que generar con la carpeta ?.
Varadha31590


21

En Font Awesome 5, puede crear iconos personalizados con sus propios datos SVG. Aquí hay un repositorio de demostración de GitHub con el que puedes jugar. Y aquí hay un CodePen que muestra cómo se podría hacer algo similar en <script>bloques.

En cualquier caso, simplemente implica usar library.add()para agregar un objeto como este:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

Tenga en cuenta que el elemento etiquetado por el comentario "svg path data" en el ejemplo de código es lo que se asignará como el valor del datributo en un <path>elemento que es hijo del <svg>. De esta manera (dejando de lado algunos detalles para mayor claridad):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(Adaptado de mi respuesta similar aquí: https://stackoverflow.com/a/50338775/4642871 )


¿Qué pasa si queremos usar los prefijos estándar, para que el nuevo svg pueda caber en el sitio web?
Norbert Kardos

1
Puedes usar el prefijo que quieras. Pero si se utiliza un prefijo estándar ( fab, fas, far, fal) va a estar en mayor riesgo de un conflicto de nombres, si no es ahora, posiblemente en el futuro a medida que continuamos añadiendo iconos con esos prefijos estándar. El uso de un prefijo personalizado no hará que una svg sea menos probable que "encaje en el sitio web", pero no estoy seguro de lo que quiere decir con esa frase, ¿entonces tal vez podría aclarar?
mwilkerson

Necesitamos un ícono de marca social específico (con más de 200 millones de usuarios), que ya se solicitó. Nos gustaría agregar este ícono de svg a la versión pro para usarlo en un sitio web, sin hacer excepciones de html / css / otros casos. Todas las otras marcas ya tienen íconos, por lo que la clase fab está presente en los elementos (y la marca realmente seleccionada se agrega dinámicamente al CSS)
Norbert Kardos

1
Sí, funcionará bien para usar el prefijo estándar para agregar su icono personalizado. Solo tenga en cuenta que si el nombre del icono termina siendo el mismo que agregamos a ese prefijo más adelante, habrá un conflicto. Entonces, ¿tal vez elegir un nombre de icono que sea poco probable que entre en conflicto? CodePen bifurcado para demostrar: codepen.io/fontawesome/pen/pZWXYX
mwilkerson el

Mi SVG provenía de un archivo de adobe AI y tenía múltiples rutas. Esto me impidió poder configurar correctamente el parámetro "d" especificado anteriormente. Primero tuve que convertir el archivo AI en una ruta compuesta antes de exportarlo como SVG. Aprendí a hacer eso aquí: graphicdesign.stackexchange.com/questions/35054/…
Alex Standiford

19

Sugiero mantener sus iconos separados de FontAwesome y crear y mantener su propia biblioteca personalizada. Personalmente, creo que es mucho más fácil mantener el mantenimiento de FontAwesome separado si va a crear su propia biblioteca de iconos. Luego puede tener FontAwesome cargado en su sitio desde un CDN y nunca tener que preocuparse por mantenerlo actualizado.

Al crear sus propios iconos personalizados, cree cada icono a través de Adobe Illustrator o un software similar. Una vez que haya creado sus iconos, guárdelos individualmenteSVG formato en su computadora.

A continuación, dirígete a IcoMoon : http://icomoon.io , que tiene el mejor software de generación de fuentes (en mi opinión), y es gratis. IcoMoon le permitirá importar sus fuentes individuales SVG-guardado en una biblioteca de fuentes, a continuación, generar la biblioteca de glifo icono personalizado en eot, ttf, woff, y svg. Un formato que IcoMoon no genera es woff2.

Después de generar su paquete de iconos en IcoMoon , diríjase a FontSquirrel : http://fontsquirrel.com y use su generador de fuentes. Use su ttfarchivo generado en IcoMoon . En el paquete de iconos recién generado creado, ahora tendrá su paquete de iconos enwoff2 formato.

Asegúrese de que los archivos de eot, ttf, svg, woff, y woff2son todos del mismo nombre. Está generando un paquete de iconos de dos sitios web / software diferentes, y ellos nombran su salida generada de manera diferente.

Tendrás CSS generado para tu paquete de iconos en ambas ubicaciones. Pero el CSS generado en IcoMoon no incluirá el woff2formato en su @font-face {}declaración. Asegúrese de agregar eso cuando agregue su CSS a su proyecto:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Tenga en cuenta que puede obtener los valores de glifo unicode de cada icono en su paquete de iconos utilizando el software IcoMoon . Estos valores pueden ser útiles para asignar sus iconos a través de CSS, como en (suponiendo que estemos usando lo font-familydeclarado en el ejemplo @font-face {...}anterior):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

También puede obtener el valor Unicode del glifo e953si abre el svgarchivo generado por el paquete de fuentes en un editor de texto. P.ej:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

no funciona ,.,. complete todo el proceso, solo el icono no aparece en lugar de los números aparecen
Inzmam ul Hassan

1
¿Puedes por favor elaborar un poco más? Estoy feliz de ayudarte con tu problema. ¿Especificaste font-family: customiconpack;con tu selector:after? Permítanme actualizar mi solución ahora mismo para el selector:afterejemplo de código.
Pegues el

cargué el archivo svg de mi ícono,. descargué el archivo, puse los que estaban en el proyecto, agregué un nuevo archivo CSS al proyecto, copié su código en el archivo, cambié el código con mi código de icono,. no funcionó
Inzmam ul Hassan

1
Únase a esta sala de chat que creé para que podamos discutir el problema más fácilmente: chat.stackoverflow.com/rooms/132402/…
Pegues

2
Estoy comentando aquí solo para que otros sepan que el problema fue que usted creó su SVG en Illustrator a partir de un PNG importado. Debe recrear su icono como un vector. PNG es un formato ráster y no tiene curvas vectoriales.
Pegues el

18

Depende de lo que tengas. Si su icono de svg es solo una ruta, entonces es bastante fácil agregar ese glifo simplemente copiando el atributo 'd' a un nuevo elemento <glyph>. Sin embargo, la ruta debe escalarse al sistema de coordenadas de la fuente (el cuadrado EM, que normalmente es [0,0,2048,2048], el estándar para las fuentes Truetype) y alinearse con la línea de base que desee.

Sin embargo, no todos los navegadores admiten fuentes svg, por lo que también tendrá que convertirlo a otros formatos si desea que funcione en todas partes.

Fontforge puede importar archivos svg (seleccione una ranura de glifo, Archivo> Importar y luego seleccione su imagen svg), y luego puede convertir a todos los formatos de fuente relevantes (svg, truetype, woff, etc.).


13

Enfoque similar a @ Samuel-bergström:

  • Descarga Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
  • Descargar FontForge http://fontforge.github.io/en-US/downloads/
  • Descargar Inkscape
  • Abra Inskscape y cree una forma de capa única como su nuevo icono de fuente
  • Guardar archivo SVG, cerrar Inkscape
  • Abra FontForge (si tiene varios monitores, use Windows-LeftArrow para reposicionar, ya que tienen extrañas ventanas Java SWING que se salen del monitor y tienen problemas modales con ventanas emergentes; tuve que verificar mi barra de tareas para algunos)
  • Archivo | Abra fontawesome-webfont.svg
  • Archivo | Importar
  • Desplácese hacia abajo, haga clic derecho en el icono | Información de glifo
  • Actualice el nombre del glifo a uniFXXX (XXX es algo así como 501, un número más alto que el Unicode más alto utilizado en la v4.5 de FontAwesome)
  • Unicode Vlaue U + fXXX
  • Haga clic en Aceptar
  • Archivo | Salvar
  • Archivo | Generar fuentes ...
  • Cerrar FontForge
  • Abre tu proyecto web
  • Copie sus archivos de fuente a la carpeta (\ en mi proyecto) "\ Content \ fonts \".
  • Edite "\ Content \ styles \ fa \ path.less" para que sea como:

@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

Sé que puede ser 'controvertido' comentar otros tipos de archivos, pero me alegra saber cómo generar archivos .eot o .otf en los comentarios.

  • y finalmente, como menciona Samuel, actualice su CSS / LESS con:

    .fa-XXX: antes de {content: "\ f501"; }


3

Investigué un poco sobre las fuentes web SVG y la creación de fuentes, en mi opinión, si desea "agregar" fuentes a fuentes que ya existen, debe hacer lo siguiente:

vaya a Inkscape y cree un glifo, guárdelo como SVG para que pueda leer el código, asegúrese de asignarle un carácter Unicode que no se use actualmente para que no entre en conflicto con ninguno de los glifos existentes en la fuente. esto podría ser difícil, así que creo que una aproximación mejor y más simple sería reemplazar un glifo existente por el tuyo (solo elige uno que no uses, copia la primera parte:

Guarde el svg y luego conviértalo en fuente web utilizando cualquier convertidor en línea para que su fuente web funcione en todos los navegadores.

Una vez hecho esto, debe tener un SVG con uno de los glifos reemplazados, en cuyo caso ya ha terminado. si no, necesita crear el CSS para su nuevo glifo, en este caso intente y reutilice los CSS existentes de los FA, y solo agregue

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

2

Si desea algunos íconos (o todos) de font-awesome, incluidos los íconos personalizados de svg, puede:

1- Vaya a http://fontawesome.io/ Descargue el zip y extráigalo, por ejemplo, en su Escritorio.

2- Vaya a http://fontastic.me/ use su correo electrónico para crear una cuenta.

3- Una vez que haya iniciado sesión, haga clic en la opción de encabezado: Agregar más iconos.

4- Seleccione el SVG de font-awesome ubicado en su zip extraído dentro de las fuentes.

5- Repita los procesos cargando sus propios archivos svg.

6- Dentro de Inicio (en el encabezado de la página) Seleccione los iconos que desea descargar, personalícelos para darles sus nombres personalizados y seleccione publicar para tener un enlace o descargar las fuentes y CSS.

Perdón por mi inglés ! :RE


Eso funcionará, pero creo que es mejor crear su propia biblioteca de iconos personalizados y usar el lado fontawesome. Permitirá actualizar fontawesome (con nuevos íconos).
Guillaume Harari
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.