Clicky

Cómo convertir tus iconos en una fuente web

IcoMoon

La forma más fácil es usar una gran aplicación gratuita en línea llamada IcoMoon

En este tutorial, vamos a ver cómo convertir iconos vectoriales en una fuente web con una gran aplicación web gratuita llamada IcoMoon. A continuación, vamos a ver cómo utilizar en una página web los ficheros de fuentes generados y el CSS.

Las ventajas de utilizar un icono como una fuente

Un icono como fuente tiene varias ventajas sobre las imágenes de mapa de bits, además de la nitidez de la imagen.

•  Idoneidad: una fuente icono será mucho menor en tamaño de archivo que una serie de imágenes, especialmente si has usado imágenes de tamaño doble para pantallas de Retina. Y una vez que la fuente se haya cargado, los iconos rendirán al instante, sin necesidad de descargar una imagen.
•  Escalabilidad: una fuente icono se puede ajustar a cualquier tamaño ajustando el tamaño de la fuente <code>font-size</code>  en el CSS que le acompaña. Esto permite experimentar con diferentes tamaños, mientras que, para las imágenes de mapa de bits, se tendría que llamar a un archivo de imagen en cada tamaño.
•  Flexibilidad: Los efectos de texto pueden ser fácilmente aplicados a estos iconos, incluidos colores, sombras y los estados de rollover. También  mostrarán cualquier color o imagen de fondo.
•  Compatibilidad: las fuentes web son compatibles con todos los navegadores modernos y antiguos, incluso IE 6 y anteriores.

Por lo tanto, vamos a empezar!

Creación de una fuente de icono

Se pueden construir fuentes de símbolos usando una aplicación dedicada a la creación de fuentes como Glyphs, pero es una herramienta profesional de tipografía que va mucho más allá de las necesidades o requerimientos para la construcción de una simple fuente icono, en la que no es importante la relación entre los caracteres (es decir, kerning y ligatures).

Con mucho, la forma más fácil es usar una gran aplicación gratuita en línea llamada IcoMoon, de Keyamoon, que elimina todos los problemas de convertir símbolos en una fuente web.

Esta aplicación HTML5 ayuda en la creación de ficheros para usos sencillos, como la construcción de fuentes de iconos. IcoMoon viene con una serie de conjuntos de iconos ya cargados, y se pueden agregar más a su biblioteca, la mayoría de los cuales se puede utilizar de forma gratuita (comprobar la licencia). Si está buscando iconos bastante estándar, como "descarga de archivos" y "carro de compras", entonces es posible que para el uso de uno de ellos sea preferible que te des de alta en una cuenta.

Paso a paso

1. Prepara tus ilustraciones

Para empezar, es necesario crear los iconos en un programa de dibujo vectorial que sea capaz de exportar a formato SVG, como Illustrator o Inkscape.

Mientras que estés diseñando, puedes trabajar con cualquier color que te gusta, pero los iconos deben ser de un color sólido. Asegúrate de que cada icono tiene aproximadamente el mismo tamaño. Tener un icono mucho más alto o más largo que el otro va a hacer que sea difícil construir una fuente consistente. En este caso, se ha tenido que reducir el ancho del icono del cohete para que coincida con los demás.

dibujar los iconos

2. Limpiar

Comprueba cada icono con cuidado para asegurarte de que no tiene imperfecciones - detalles que se ven bien en tamaños más pequeños pueden ocultar pequeños defectos con un zoom en el icono como se muestra a continuación, tengo que quitar los escalones irregulares que se han colado en cuando elementos de estratificación.

En Illustrator, utiliza la herramienta Pathfinder para unir elementos superpuestos, y el elemento Minus Front para eliminar elementos de corte, como la estrella de estos iconos.

El principio clave es asegurarse de que tu icono se puede leer a pequeña escala. Simplificar tanto como sea posible.

dibujar iconos, limpiar

3. Exportar a SVG

Ahora, selecciona un icono, y copia y pégalo en un nuevo documento de (por ejemplo, 200 × 200 píxeles). Escala en el icono para que se ajuste. Puede que te resulte útil establecer una regla de referencia. El icono de color de modo que es de color negro sólido sobre un fondo blanco.

Ahora, selecciona Archivo <code>File"¦ Save as</code> y guarda el archivo como un archivo SVG. Utiliza los ajustes predeterminados de SVG. Una vez que hayas hecho esto para todos los iconos, estás listo para crear una fuente web.

exportar a dormaro SVG

4. Las importaciones en IcoMoon

Abre IcoMoon web app. Para importar un icono, haz clic en el botón "Import icons", y luego selecciona los archivos SVG que deseas agregar - se puede agregar varios archivos a la vez. Éstos aparecerán entonces en "Your Custom Icons". Si están resaltados en amarillo, serán parte de la fuente icono que vas a crear. En este ejemplo, se puede ver que se ha decidido no exportar uno de los propios iconos, y se ha añadido uno de los iconos de los "Mini-icons".

importar iconos a IcoMoon

5. Exportación de la Fuente de IcoMoon

Puedes hacer clic en el botón "Edit" si deseas ajustar la posición del icono, el tamaño o la rotación. Utiliza el botón "Save Copy" para crear variaciones de icono (por ejemplo, una imagen de espejo de un icono). Añadir una etiqueta significativa para el icono, ya que esto puede utilizarse para generar el nombre de clase para él.

Cuando estés listo, haz click en el botón "Font" en la parte inferior de la pantalla para comenzar a generar la fuente. Aquí es donde puedes asignar el icono que se asigna a qué personaje, por ejemplo, si el conjunto de iconos es de seis imágenes de una pelota que gira, se puede asignar a los carácteres q, w, e, r, t e y con los seis frames. En las preferencias, elegir un nombre para la fuente. También se puede ajustar las métricas de la fuente, pero si no se va a establecer la fuente personalizada junto al texto estándar, realmente no tienes que preocuparte acerca de esto.

exportar iconos de IcoMoon

6. Descargar los archivos de fuentes

Haz clic en "Download" para descargar el paquete de fuentes a tu máquina. Es una subcarpeta que contiene tus fuentes (en formatos WOFF, EOT y TTF), así como una página HTML y el CSS de muestra correspondiente. Incluso hay un archivo JavaScript con una solución si lo necesitas para que soporte IE 6 o 7.

Para agregar las fuentes a tu proyecto, cópialo a la subcarpeta fuentes de tu sitio. Puedes copiar y pegar el CSS de style.css en un archivo CSS de tu propio sitio, pero aquí el enfoque es renombrarlo como fonts.css y conservarlo como un archivo CSS independiente. A continuación, deberás agregar una referencia a este archivo CSS en el archivo HTML utilizando el vínculo relativo:

<link rel="stylesheet" href="/fonts.css" />

En el elemento @font-face del archivo CSS, tendrás que cambiar la referencia de URL a la nueva ubicación relativa de las fuentes, o simplemente dejar caer la carpeta de fuentes en la carpeta de hojas de estilo.

archivos generados por IcoMoon

7. Llamar a la fuente

Como se puede ver en el archivo ejemplo index.html, hay dos maneras de hacer referencia a la fuente personalizada, ya sea por su carácter (unicode o nombre) o por su nombre de clase. El primer ejemplo utiliza la condición HTML5 data-icon:

<div aria-hidden="true" data-icon="&#x67;"></div>

Aquí, la clase fs1 se utiliza para definir el tamaño de la fuente. La referencia aria-hidden ayuda a asegurar que el carácter no es leído por los lectores de pantalla.

El segundo método utiliza un elemento span:

<span aria-hidden="true"></span>

Este método es útil cuando se desea que el símbolo aparezca en línea con el texto normal.

Si quieres hacer que el icono sea un vínculo, puedes envolver todo en un href :

<a href="http://www.yoursite.com"  data-icon="&#x73;"></a>

Aquí se ha agregado la clase iconlink y dado un estado estacionario:

a.iconlink {
  font-family: 'youriconfont';
  text-decoration:none;
  color: #666666;
}
a.iconlink:hover {
  text-decoration:none;
  color: #999999;
}

fuentes iconos personales

8. Ideas avanzadas

Como se acaba de descubrir con el estado estacionario, el cambio de color del icono es tan fácil como poner la propiedad de color en nuestro CSS y cambiar el tamaño es tan fácil como establecer la propiedad font-size. También pueden establecerse otras propiedades, como la sombra del texto y la transparencia, a la vez que conserva la resolución de la independencia de una fuente.

Pruébalo, y te garantizo que nunca usarás de nuevo los iconos de mapa de bits.

Jesus_Caceres