solid - font awesome svg download

Agregue iconos personalizados a la fuente impresionante

Question

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 <glyph /> :

...
<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 eficaz tomar el código de mi icono svg, pegarlo como un nuevo elemento de glifo y asignar un carácter unicode no utilizado?

Answer 1

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

Answer 2

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 <glyph>. 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 fuentes Truetype) y alineado con la línea base que desea.

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

Answer 3

En Font Awesome 5, puede crear iconos 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 <script> .

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 <path> que es un elemento secundario de <svg> . Me gusta esto (dejando de lado algunos detalles para mayor claridad):

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

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

Answer 4

Investigué un poco sobre las fuentes web SVG y la creación de fuentes, en mi opinión, si quieres "agregar" fuentes 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)
>}

Answer 5

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

Answer 6

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 fuentes 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 fuentes y css.

Perdón por mi inglés ! :RE

Answer 7

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 separado FontAwesome si va a crear su propia biblioteca de iconos. A continuación, puede cargar FontAwesome en su sitio desde un CDN y nunca tener que preocuparse por mantenerlo actualizado.

Al crear sus propios iconos 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 fuentes (en mi opinión), y es gratis. IcoMoon te permitirá importar tus fuentes individuales guardadas en svg en una biblioteca de fuentes, y luego generar tu biblioteca de glifos de iconos personalizada 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 archivo ttf generado en IcoMoon . En el paquete de iconos recién creado creado, ahora tendrá su paquete de iconos 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 iconos de dos sitios web / software diferentes, y nombran su salida generada de manera diferente.

Tendrá CSS generado para su paquete de iconos en ambas ubicaciones. Pero el CSS generado en IcoMoon no incluirá el formato woff2 en su declaración @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 iconos 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 fuentes en un editor de texto. P.ej:

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

Answer 8

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 fuentes ...
• Cerrar FontForge
• Abra su proyecto web
• Copie los archivos de fuentes 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;
    }

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

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

  .fa-XXX: before {content: "/ f501"; }

Answer 9

Vaya a fontawesome.com y seleccione el paquete de licencia en la parte inferior que más le convenga.