Ahorra tiempo mediante la generación de fuentes de iconos fácilmente personalizables
No abras PhotoShop cada vez que desees actualizar un color de icono. Crea fácilmente fuentes de iconos personalizados con Fontastic! Los iconos se pueden modificar sobre la marcha a través de CSS. Cambia la escala, cambia el color, añadir una sombra y más en tan sólo un segundo.
Crear una fuente de icono es un concepto claro. Tú tienes una idea proverbial y la pones en el papel. Sin embargo, si quieres ponerlo en práctica en tu página y así como yo, que no tienes ninguna formación para hacerlo, puedes estar muerto en el agua. Por suerte existe Fontastic.me, que va a liberar a tus manos de la mayor parte de las dos tareas mencionadas.
¿Por qué utilizar fuentes de iconos?
Siempre hay preguntas como "¿Por qué debería utilizar esto?".
Razón 1: Te ahorrará tiempo. No tendrás que abrir PhotoShop cada vez que desees actualizar el color o tamaño de un icono, añadir una animación o sombra. Puede modificar eso vía CSS. Acelerará tu sitio web, ya que vas a incluir sólo aquellos iconos que necesitas, no paquetes de iconos enteros pre-hechos con cientos de iconos que no se van a utilizar.
Razón 2: Los iconos están incrustados como vectores para que se ven limpios y perfilados. Y no tendrás que crear versiones especiales para el iPad o el iPhone. Fontastic es gratis, así que puedes utilizar los iconos y fuentes que hayas creado en cualquier proyecto comercial, pero leer la licencia para los iconos de las colecciones que forman su biblioteca.
Después de registrarte e iniciar sesión, la aplicación te llevará automáticamente a la biblioteca Fontastic. En tres sencillos pasos puedes seleccionar qué iconos deseas descargar. Primero en "Select", se puede navegar a través de más de 1.700 iconos disponibles divididos en varias categorías.
Selecciona tus iconos preferidos con sólo hacer clic en ellos. Después ve a "Customize" donde puedes personalizar la asignación de caracteres y el mapeo de clases CSS para tus iconos.
Ellos ya tienen una configuración predeterminada, pero si quieres puedes hacer que el character y el nombre de clase CSS sean asignados a cada icono. También puedes elegir entre dos diferentes preferencia de asignación de caracteres para tus iconos: basc latin o PUA. El paso final es "Download" que se explica por sí mismo. Después de haber descargado el paquete de fuente (nombre por defecto, untitled-font-1, por lo menos en mi caso), verás que hay varios formatos requeridos por los navegadores : .ttf, .eot, .svg, .woff.
También incluye la página de referencia de HTML que muestra todos los iconos con el código para pegar en tu página, y en la hoja de estilo CSS. Cuando se desea instalar la fuente, tienes que copiar a la carpeta "Fonts" del sitio web de tu proyecto. Copia el código de estilo CSS de tu sitio web o añade el archivo CSS "styles.css" a tu proyecto y enlazar desde tu página HTML.
Cuando desees insertar un icono específico, tendrás que copiar y pegar la etiqueta data-icon, o el nombre de clase CSS a cualquier etiqueta HTML. Sin embargo, si deseas agregar tu propio icono diseñado para tu colección, también lo puedes hacer. Puedes importar iconos SVG o fuentes. Si subes una fuente SVG, se importarán todos los iconos que tenga y puedes agregar hasta 1.000 iconos en una colección.
Después de que lo has hecho, tendrá que esperar unos segundos para cargar y, después de eso, repetir los mismos pasos desde el comienzo de este párrafo para insertar en tu página. Sin embargo, uno de los problemas más comunes es que tu icono sea ignorado después de la carga, o el icono aparece vacío. solución es simple: necesitas usar Illustrator o cualquier programa similar. Sólo tienes que ampliar los trazos, porque Fontastic no puede importar SVG con trazos.
Si el icono es demasiado pequeño, comprueba el tamaño del artboard, ya que las dimensiones del icono se definen por él. También debes comprobar si hay algunas formas invisibles incluidas en tu icono, porque cuando se importan, serán negras y arruinarán tu icono. Antes del final, debo mencionar que hay una opción para borrar tu cuenta en Fontastic.me . Sin embargo, si optas por eliminarla, vas a perder los iconos y fuentes de icono asociadas, por lo que hay que proceder con cautela.
Fontastic.me es un gran sitio si deseas implementar los iconos en su sitio web. La biblioteca es grande, así que los que no quieran, o no tengan nervios para el diseño de iconos, pueden simplemente descargar algunos de su gran variedad. En lo personal, en mi primer contacto con la implementación de las fuentes y los iconos, Fontastic fue una gran elección, así que apuesto que a la gente con un poco más de experiencia les resultará fácil como una brisa de verano.
