Este artículo también está disponible en: English (Inglés)
¡Saludos! El mundo no podría girar sin iconos, así que hoy os traigo un tutorial de diseño muy simple y rápido para que podáis crear vuestra propia fuente de iconos, una forma rápida y súper ligera de integrar recursos visuales en formato vectorial dentro de vuestros proyectos y aplicaciones. ¡Vamos a ello!
La importancia de los iconos y fuentes de iconos.
En nuestro artículo con consejos para identificar y elegir la tipografía adecuada comentábamos que había un tipo de fuentes que sólo ofrecen símbolos y dibujos, llamadas Dingbats o Dingfonts. Ya desde las primeras versiones de Windows era latente de la necesidad de tener acceso a una serie de símbolos visuales para completar ciertos mensajes.
Hoy en día el uso de icono está muchísimo más extendido y difícil sería encontrar una web que no los usase: los tenemos en cualquier panel de control y de usuario, en los hamburger menu de las versiones responsive, y muy a menudo, como formas sencillas de ilustrar los contenidos de texto en nuestras landings. Mirad, por ejemplo, esta franja de características de una de nuestras promociones:
A lo largo del tiempo los diseñadores han probado a insertar iconos con métodos muy distintos en las páginas webs. Durante mucho tiempo se importaban como imágenes de mapa de bits transparentes (en formato GIF o PNG). Pero, claro, ya sabemos que con imágenes de estos formatos el tema del escalado suele suponer un problema, y además a veces nos vemos obligados a exportar una misma imagen en diferentes resoluciones para que se pueda ajustar a los distintos contextos (algo muy frecuente antaño en aplicaciones de móvil nativas), por lo que aumenta el peso en ficheros de imágenes de nuestros proyectos.
Conforme la compatibilidad con imágenes de vectores se fue agrandando se generalizó el uso del formato SVG, que es el formato que nos permite un escalado perfecto sin perder ningún tipo de detalle, al menos coste de archivo posible. ¡Alabados sean los vectores!
Ahora bien, hay un paso más allá de importar directamente nuestros iconos como imágenes vectoriales, y es cargar directamente una fuente de iconos.
¿Qué es una fuente de iconos?
Una fuente de iconos no es más que un fichero que reúne un conjunto de códigos vectoriales asociados a cada carácter, que luego podemos invocar como si de una tipografía cualquiera se tratase.
Seguro que te suenan nombres como FontAwesome o LineIcons. Éstas y muchas otras librerías funcionan exactamente así. Aprovechamos la capacidad de importación de fuentes de nuestros navegadores web o aplicaciones para insertar en nuestro proyecto una librería fácil y accesible de iconografía.
En web lo único que nos hace falta es el fichero de la fuente y un fichero CSS que nos ayude a importar la imagen deseada de forma semántica mediante clases. A modo de estándar, los iconos se suelen insertar dentro de etiquetas de tipo <i></i>. También es conveniente tener algún tipo de documentación que nos ayude a encontrar el icono que queremos en cada momento.
Resumiendo, usar una fuente de iconos es la forma más sencilla de poder tener disponible una biblioteca de imágenes en un formato sin pérdida y de fácil acceso. Además, presenta muchísimas más ventajas que cargar las imágenes vectoriales en nuestro proyecto.
Ventajas de usar una fuente de iconos.
- Podemos escalar los iconos a cualquier tamaño manteniendo una perfecta calidad.
- Podemos usar varias veces un mismo icono en distintos tamaños y colores con la misma referencia.
- Reducimos la carga de la página al tenerlo todo unificado en un par de ficheros, de modo que mejoramos el rendimiento.
- Permite un sencillo control de versiones de la fuente para poder añadir nuevos iconos en ediciones posteriores.
- Ayudamos al diseño al poder directamente aplicar propiedades de CSS (colores, gradientes, sombras, etc.) sin tener que editar el icono, ya que se aplican los mismo principios que con una tipografía, algo que no funciona igual con las etiquetas de imágenes.
- También para el navegador es más fácil cargar una fuente de iconos que cargar un fichero o código en línea SVG (si os interesa el tema, aquí tenéis un enlace al experimento que lo demuestra).
Tampoco vamos a engañarnos, no todo es perfecto: al cargar la imagen como un carácter tipográfico podemos tener alguna que otra diferencia en el renderizado según cada navegador, y también tendremos más complicaciones a la hora de centrar y posicionar el elemento porque no funciona igual que una imagen. Sin embargo, me parece un precio a pagar muy bajo para todo lo que nos aporta.
Así que, ¡vamos a crear nuestra propia fuente de imágenes!
Creando nuestra fuente personalizada de iconos.
Paso 1: Haz una selección de iconos.
Lo primero que necesitas para crear tu librería de iconos es, obviamente, hacer una selección de los iconos que vas a necesitar. Si ya los tienes diseñados, ¡perfecto! Si vas a utilizar iconos diseñados por terceros puedes buscar en librerías como Flaticon , Iconfinder o Icon-icons.
Te doy los siguientes consejos para elegir iconos:
- Parte de los iconos más básicos que puedes necesitar, probablemente relativos a la interfaz de tu aplicación (botones de menú, edición, favoritos, email, teléfono, dirección, redes sociales, etc.).
- Haz una lista de palabras y conceptos relativos a tu marca, proyecto o temas relacionados, cuanto más abundante, mejor. No tengas miedo a tener muchos iconos, es mejor que la librería siempre esté nutrida de cara a futuras necesidades.
- Elige iconos que estén alineados visualmente. Es decir, que todos tengan un mismo estilo: si eliges iconos que dibujan imágenes con líneas finas y redondeadas, no los mezcles con iconos angulosos de colores planos y relleno. Haz que se vean integrados como conjunto.
- Si vas a querer que tus iconos puedan ser flexibles en colores, intenta que sean siempre en blanco y negro.
- ¡No olvides atribuir a sus autores si utilizas iconos que lo requieran!
Paso 2: Descarga los iconos en formato SVG.
Puedes ir descargando los iconos conforme los vas encontrando, o guardarlos en una colección y luego descargarlos todos en SVG de golpe (como algunas páginas te permiten). En cualquier caso, ve almacenando en una misma carpeta todos los ficheros vectoriales que vayas a incluir en tu nueva colección.
Nota: webs como Flaticon te permiten también convertir tu selección de iconos en una fuente directamente a través de su web. Nosotros vamos a pasar de esta opción porque me parece más interesante tener la libertad de hacer nuestra fuente de iconos con ficheros de cualquier origen.
Paso 3: Crea la fuente (usando, por ejemplo, Iconmoon).
Ahora que ya tenemos nuestras imágenes elegidas, tenemos bastantes herramientas que nos permiten consolidarlas en una fuente. Algunas de las que conozco son Fontello, Fontastic y Iconmoon, siendo esta última mi preferida por lo simple y efectiva que resulta.
Para ello debemos entrar en la sección de IcoMoon App.
En este panel verás que IcoMoon te ofrece de entrada unos iconos básicos que puedes añadir a tu proyecto, si así lo decides. Simplemente, clica en aquellos que te interesan y se quedarán seleccionados para la fuente que quieras hacer. También te recomiendo pulsar en «untitled project» y comenzar por darle un nombre que te permita identificar tu librería.
Ahora vamos a lo importante. Debemos pulsar en Import icons para subir nuestros SVG preparados previamente. También podemos arrastrar los ficheros al navegador y se añadirán a la librería. Una vez en ella los puedes seleccionar uno por uno o haciendo click y arrastrando sobre las filas.
Una vez lo tienes todo elegido, ¡pasamos a «Generate Font«! En esta tab puedes aprovechar para renombrar los iconos con nombres que te resulten más intuitivos. Esto es importante para que sean fáciles de localizar después. También puedes modificar el código unicode de cada carácter si te resulta relevante.
Otra sección muy importante es la de las preferencias (Preferences). Aquí puedes elegir mejor cómo se ha de comportar la librería cuando la insertes. Por ejemplo, el Class Prefix implica que todos los nombres que eliges arriba luego tendrás que referenciarlos con un .icon-NOMBRE cuando los insertes. Puedes cambiarlo a algo más sencillo, si lo prefieres. Yo suelo cambiarlo a .ic-NOMBRE porque me resulta más cómodo.
También puedes elegir el selector de CSS que va a indicarle al navegador que se trata de un elemento de esta fuente. Mi sistema favorita es usar una clase, en este caso .icon. Así, si a futuro quiero incluir varias librerías, puedo diferenciarlas con ese selector.
Por último también está la opción de numerar la versión de la fuente. Es un detalle muy útil si más adelante añades nuevos elementos, para llevar un control de la evolución.
Como ves, tienes muchas opciones adicionales que puedes especificar. Incluso el comportamiento avanzado de las ligaduras entre caracteres. Personalmente no suelo recurrir a ellos así que con esto tenemos de sobra para exportar nuestra fuente. Para ello basta con darle al botón de «Download» en la tab.
Obtendrás un fichero comprimido con la siguiente estructura:
El Read Me te sirve de explicación. El fichero demo y la carpeta demo-files sólo te sirven para ver tu librería y poder recordar los nombres y códigos que utilizan. El fichero selection.json es un backup por si necesitas reimportar tu librería en IcoMoon y editarla de nuevo, en caso de que pierdas los proyectos guardados en tu cuenta o no tengas cuenta.
En resumen, los únicos ficheros que vas a necesitar son los de la carpeta fonts y el style.css.
Paso 4: Instala la fuente .ttf para uso local en tu ordenador.
Este paso no tiene más misterio, salvo el de tu sistema operativo para instalar fuentes. Generalmente con el botón derecho sobre el fichero tendrás la opción de instalar la fuente. ¡Ahora ya la puedes usar! Pero… ¿Cómo elegir el elemento que quieres? Para eso entran los códigos que puedes copiar de tu fichero de demo o de la web de IcoMoon, en varios apartados. Generalmente lo verás como un cuadrado genérico.
Copìa el cuadrado misterioso del icono deseado.
Luego pégalo en el programa que estés usando (Word, Illustrator o lo que sea), tras elegir el tipo de fuente con el nombre que le hayas dado.
Paso 5: Añade tu fuente a un proyecto web.
Como hemos dicho antes, para añadir la fuente y usarla en un proyecto web vas a necesitar la carpeta fonts y el fichero styles.css. Generalmente styles.css es el nombre de la hoja de estilos de tus proyectos, así que siéntete libre de renombrarla con, por ejemplo, mi-fuente.css. Elijas lo que elijas, el primer paso es importar tu fichero en el <head> de tu web.
// Import font stylesheet
<link rel="stylesheet" href="css/catcafe.css">La hoja de estilos se encarga ya de importar las fuentes. Si cambias la ruta o la estructura de archivos, asegúrate de modificarlo en el @font-face del CSS de tu fuente:
@font-face {
font-family: 'catcafe';
src: url('/fonts/catcafe.eot?3lrf4x');
src: url('/fonts/catcafe.eot?3lrf4x#iefix') format('embedded-opentype'),
url('/fonts/catcafe.ttf?3lrf4x') format('truetype'),
url('/fonts/catcafe.woff?3lrf4x') format('woff'),
url('/fonts/catcafe.svg?3lrf4x#catcafe') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}Por último, invoca el icono que desees. Tal y como hemos configurado este ejemplo, para insertar uno de nuestras imágenes deberíamos hacerlo de la siguiente manera.
// use the classes .icon and .icon-[NAME OF DESIRED ICON]
<i class="icon icon-cat"></i>¡Y voilà, ya tienes todo lo necesario para montar tu web con iconos personalizados!
Landing de demo y ejemplo en vivo.
Como de costumbre, he aplicado estos pasos aprovechando el tutorial y te dejo una landing de ejemplo y su enlace al repositorio donde hemos aplicado este proceso, para que puedas ver en directo la estructura de archivos y cómo se relacionan, así como lo versátiles que son de usar los iconos de nuestra fuente.
Con esto acabamos el tutorial. ¡Ya puedes darle gracia y salero a tus proyectos con tus iconos preferidos de forma sencilla, rápida y optimizada! Espero que este artículo te haya resultado útil y nos cuentes tus experiencias poniéndolo en marcha.
Ah, y antes de terminar, la atribución no debe faltar ; ). Los iconos usados para el ejemplo de este artículo, como ya sabéis, están hechos por Freepik de www.flaticon.com.
¡Un cálido saludo y hasta pronto!