20
Jun 2013

Alternativa a
CSS Sprites

Anteriormente hemos mencionado que cuando queremos insertar iconos en nuestros sitios, usar una imagen que contenga todos los elementos que necesitamos (sprites) es una buena opción para ahorrar peticiones http al servidor, pero con la llegada de nuevos dispositivos con pantallas con alta densidad de pixeles, nuestros iconos pueden verse demasiado pequeños o perder calidad. Podemos recurrir a manejar distintas versiones de nuestros iconos en diferentes tamaños o colores, pero estamos duplicando contenido que ya poseemos. ¿Cómo podemos evitar el duplicado de archivos y tener uno solo que nos permita tener un balance entre tamaño de archivo y calidad?

splash

La solución a esto resulta sencilla, ya que conocemos un elemento que es ligero,nos permite escalar su tamaño sin perder calidad y podemos manipular otras de sus propiedades: las fuentes. En este caso, no se tratará de texto, sino de símbolos.  Al utilizar una fuente como iconos, nos da las siguientes ventajas:

  • Podemos cambiar su tamaño sin perder calidad: al tratarse de fuentes, por medio de la propiedad “font-size” podemos alterar sus dimensiones, sin que la calidad se vea afectada.
  • Cambiar el color: con la propiedad “color”: podemos cambiar el color de nuestro icono, y así adaptarlo a nuestro diseño. A diferencia que si usáramos una imagen, la cual tendría que contener el mismo icono en diferentes colores
  • Podemos agregar sombras a nuestro icono: para entender esta ventaja, debemos recordar que al usar imágenes como iconos, si agregamos sombra a una  imagen png, las sombras no respetan las transparencias, por lo cual nuestra sombra se agregará al contenedor del icono y no a la forma dentro de la imagen. Pero si usamos una fuente, la sombra se ajustara al contorno del icono.
  • Podemos agregar efectos de líneas, y texturas a nuestros iconos y cualquier efecto que nos permita CSS

Cómo usarlos

Primero necesitamos obtener nuestra fuente, si necesitamos iconos personalizados lo ideal es que contemos con una aplicación que nos permita trazar nuestros elementos de manera vectorial e importarlos como fuentes. O si necesitamos una solución rápida, podemos recurrir a herramientas en línea que hagan este trabajo por nosotros. Una herramienta recomendable es Icomoon, en ella podemos encontrar una gran variedad de iconos gratuitos, esta misma herramienta nos permite seleccionar los elementos que queremos o subir nuestras propias imágenes vectoriales y añadirlos a una fuente.

icomoon

Selección de iconos.

Luego de seleccionar los elementos que queremos, Icomoon nos permite asignar cada icono a la tecla que deseemos para no tener que agregar el icono como un pseudo elemento en nuestro HTML, haciendo la manipulación más sencilla.

set

Asignación de iconos a teclas.

Y finalmente podemos seleccionar si queremos descargar solo el archivo SVG o los archivos para fuentes (ttf,  eot,  woff, etc.). En nuestro caso lo ideal es descargar las fuentes para que podamos aplicarlas en nuestra página.Como resultado nos dan un archivo zip que contiene una carpeta con las fuentes así como un archivo HTML y CSS que nos indica cómo aplicar los iconos.

code

Iconos con su respectivo código

Para utilizar nuestra nuevos iconos, en nuestro archivo CSS debemos incluir la fuente por medio del selector “@font-face” como sigue:

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;}

Si asignamos cada icono a una letra de nuestro teclado, para utilizarlos solo bastara con incluir texto dentro de un div y a este le aplicamos un estilo para que los caracteres dentro utilicen la fuente con iconos. De esa forma ya no necesitaremos utilizar los códigos de cada icono, que pueden resultar un tanto confusos.

.iconos{/******* Clase para asignar a elementos que

queramos que conviertan texto a iconos ******/


font-family:''icomoon';

}

En nuestro HTML simplemente aplicamos la clase a un elemento, y el texto dentro se convertirá en iconos.

<h1>Fuentes como iconos</h1>
<span class="iconos">Este texto se convertirá a iconos</span>

Y de esta manera, tenemos iconos que conservaran su calidad sin importar en que dispositivo se visualicen. En este enlace, pueden ver el resultado de aplicar los elementos: Uso de fuentes como iconos

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO