Agregue iconos personalizados a la fuente impresionante

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?

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

Puede probar fontcustom , crea su propia fuente a partir de archivos svg.

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 )

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

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

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"; }

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

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