Agregue icons personalizados a la fuente impresionante

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

Noté que la versión .svg de Font Awesome está compuesta principalmente de estos elementos :

 ...    ... 

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

Dale una oportunidad a Icomoon . Puede cargar sus propios archivos SVG, agregarlos a la biblioteca y luego crear una fuente personalizada que combine FontAwesome con sus propios icons.

Podría darle a fontcustom una oportunidad, crea su propia fuente desde archivos svg.

Depende de lo que tienes. Si el ícono svg es solo una ruta, entonces es bastante fácil agregar ese glifo simplemente copiando el atributo ‘d’ a un nuevo elemento . Sin embargo, la ruta necesita ser escalada al sistema de coordenadas de la fuente (el cuadrado EM, que típicamente es [0,0,2048,2048] – el estándar para fonts Truetype) y alineado con la línea base que desea.

Sin embargo, no todos los navegadores admiten fonts 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.).

Un enfoque similar a @ Samuel-bergström:

  • Descargar 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 ícono de fuente
  • Guardar archivo SVG, Cerrar Inkscape
  • Abre FontForge (si tienes varios monitores, usa Windows-LeftArrow, para cambiar de posición, ya que tienen extrañas ventanas SWING de Java que se salen de monitor y tienen problemas modales con ventanas emergentes; tuve que verificar mi barra de tareas para ver un poco)
  • Archivo | Abrir fontawesome-webfont.svg
  • Archivo | Importar
  • Desplácese hasta la parte inferior, haga clic con el botón derecho en el icono | Glyph Info
  • Actualizar Nombre de glifo a uniFXXX (XXX es algo así como 501, un número más alto que el Unicode más alto utilizado en v4.5 de FontAwesome)
  • Unicode Vlaue U + fXXX
  • Haga clic en Aceptar
  • Archivo | Salvar
  • Archivo | Generar fonts …
  • Cerrar FontForge
  • Abra su proyecto web
  • Copie los archivos de fonts en la carpeta “\ Content \ fonts \” (en mi proyecto).
  • 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; } 

Sugiero mantener sus icons separados de FontAwesome y crear y mantener su propia biblioteca personalizada. Personalmente, creo que es mucho más fácil mantener separado FontAwesome si va a crear su propia biblioteca de icons. A continuación, puede cargar FontAwesome en su sitio desde un CDN y nunca tener que preocuparse por mantenerlo actualizado.

Al crear sus propios icons personalizados, cree cada icono mediante Adobe Illustrator o un software similar. Una vez que haya creado sus íconos, guárdelos individualmente en formato SVG en su computadora.

A continuación, diríjase a IcoMoon : http://icomoon.io , que tiene el mejor software de generación de fonts (en mi opinión), y es gratis. IcoMoon te permitirá importar tus fonts individuales guardadas en svg en una biblioteca de fonts, y luego generar tu biblioteca de glifos de icons personalizada en eot , ttf , woff y svg . Un formato que IcoMoon no genera es woff2 .

Después de generar su paquete de icons en IcoMoon , diríjase a FontSquirrel : http://fontsquirrel.com y use su generador de fonts. Use su archivo ttf generado en IcoMoon . En el paquete de icons recién creado creado, ahora tendrá su paquete de icons en formato woff2 .

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

Tendrá CSS generado para su paquete de icons en ambas ubicaciones. Pero el CSS generado en IcoMoon no incluirá el formato woff2 en su statement @font-face {} . 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 ícono en su paquete de íconos usando el software IcoMoon . Estos valores pueden ser útiles para asignar sus icons a través de CSS, como en (suponiendo que estamos usando la font-family declarada en el ejemplo @font-face {...} anterior):

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

También puede obtener el valor unicode del glifo e953 si abre el archivo svg generado por el paquete de fonts en un editor de texto. P.ej:

  

En Font Awesome 5, puede crear icons personalizados con sus propios datos SVG. Aquí hay un demo de demostración de GitHub con el que puedes jugar. Y aquí hay un CodePen que muestra cómo algo similar podría hacerse en bloques .

En cualquier caso, simplemente implica el uso de 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 atributo d en un elemento que es un elemento secundario de . Me gusta esto (dejando de lado algunos detalles para mayor claridad):

    

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

Investigué un poco sobre las fonts web SVG y la creación de fonts, en mi opinión, si quieres “agregar” fonts a la fuente ya existente de font-awesome, necesitas hacer lo siguiente:

ve a Inkscape y crea un glifo, guárdalo como SVG para que puedas leer el código, asegúrate de asignarle un carácter Unicode que no esté actualmente utilizado 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 un enfoque más simple sería reemplazar un glifo existente con el tuyo (simplemente elige uno que no uses, copia la primera parte:

Guarde el svg y conviértalo en fuente web con 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 estará listo. si no es necesario que cree el CSS para su nuevo glifo, en este caso intente y reutilice el CSS existente de 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 quieres algunos íconos (o todos) de font-awesome, incluyendo tus íconos svg personalizados, puedes:

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

2- Ve a http://fontastic.me/ usa tu 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 íconos.

4- Seleccione el SVG de font-awesome que se encuentra en las fonts extraídas dentro de la cremallera.

5- Repita los pasos cargando sus propios archivos svg.

6- Inside Home (en el encabezado de la página) Seleccione los íconos que desea descargar, personalícelos para dar sus nombres personalizados y seleccione publish para tener un enlace o descargar las fonts y css.

Perdón por mi inglés ! :RE