2012-04-20 21 views
11

Me gustaría crear una fuente de icono para usar en una aplicación web. fontAwesome, Iconic, fontomas son ejemplos de lo que me gustaría hacer, pero necesito usar iconos personalizados. No estoy seguro de por dónde empezar. Cualquier ayuda es apreciada.Herramientas para crear un icono Fuente

Respuesta

10

Inkscape es una gran aplicación gratuita para crear gráficos con vectores (de qué fuentes modernas están hechas).

FontForge es una gran aplicación gratuita para crear fuentes, y puede importar SVG (un gran formato de gráficos de vector libre) de Inkscape.

+0

Fontforge funcionó muy bien. Pude instalarlo bastante fácilmente usando brew. Gracias. – Rob

+0

Homebrew está haciendo trampa, ¡esto continuará en su registro permanente! : p – reisio

1

Rob, puedes start here.

No es el mejor ejemplo y la plantilla de la que habla está un poco desactualizada. Tendrás que experimentar moviendo tus íconos alrededor del lienzo según las líneas de base de tu fuente.

También existe este long post donde importa sus vectores a FontLab. Los inconvenientes de FontLab son su precio de $ 649 y su curva de aprendizaje es más pronunciada que Inkscape. También encontré FontLab con errores en mi instalación de OS X.

En una nota:

Alguien tiene que hacer que el software dedicado a esta tarea ...

2

A pesar de lo dicho narkeeso, una fuente sólo tiene una línea de base. Todos sus íconos deben sentarse en esa línea para ser consistentes. Algunas fuentes de iconos intentan centrar los iconos verticalmente, pero esto causa más problemas de los que soluciona y siempre puede ajustar la posición vertical del icono relativa a los caracteres circundantes utilizando la propiedad vertical-align.

He probado la línea de base en la plantilla en gran medida para ese artículo y es muy exitoso en todos los navegadores. Sin embargo, es posible que desee hacer coincidir la altura X con una fuente común como Arial. Esto se puede hacer en el convertidor Font Squirrel.

17

Si usted no ha visto ya, mi aplicación web puede ayudarle a generar fuentes icono: http://icomoon.io/app

Puede importar sus propios IVS, o navegar por la biblioteca de iconos de fuente: http://icomoon.io/app/#library

+1

Esta aplicación es realmente útil y bien ejecutada. Fácil de importar archivos SVG y exportar una fuente, completa con el CSS autogenerado. – taudep

+0

¡Esta aplicación es increíble! – Bema

+0

¿Por qué no puedo generar un svg/png de 128x128 a través de la aplicación? –

1

He estado usando una aplicación llamada glifos (http://www.glyphsapp.com/) para crear tipos de letra, y recientemente se utilizó una fuente de icono para uso web. Importé glyphicons, ya que vienen con bootstrap para ver qué métricas usaban. por lo tanto, a 20px fontsize coincidirían mejor con la cuadrícula. etc. etc.

tengo un script personalizado para exportar un archivo css que crea todas las clases con los unicodes adjuntos. y otra secuencia de comandos python que asignes valores unicode a glifos personalizados (algunos iconos son en realidad parte de Unicode, como cámara, campana y cosas por el estilo)

después de eso tengo que usar la fuente ardilla para la conversión de fuente web tho, i han estado en contacto con el desarrollador que dijo que estaba implementando la exportación de webfont. las actualizaciones son gratuitas, pero aún no ha incluido la exportación directa de webfont. por lo que siempre es un poco complicado sacar la fuente de la aplicación en el navegador.

pero ciertamente he simplificado algunos factores.

fontlab no es tan fácil de usar y no puedo recomendarlo principalmente por esa razón, pero también por el precio.glyphs ofrece una versión mini por 40 € que debería cubrir la funcionalidad necesaria para la generación de iconos.

Cuestiones relacionadas