Iconos: decoración, información y modos. Unos apuntes

Unos apuntes sobre los iconos web. Los distintos medios para obtenerlos: imágenes, svg, data uri, unicode, tipografías... o una mezcla de varias para obtener resultados variados y personalizados a cada proyecto.

Iconos: decoración, información y modos. Unos apuntes

Por Kseso ✎ 4

IconografíaLos iconos, esos pequeños símbolos presentes en toda la web, de los que los realizadores se sirven para representar cualquier cosa. Con más o menos gusto y más o menos acierto en su consecución.

El uso de estos pictogramas se remonta prácticamente al mismo momento en que las condiciones técnicas de la web permitieron incluirlos en los documentos.

Pero como con todo, el cómo usarlos ha ido cambiando con los tiempos. También las funciones asociadas a ellos. Y cómo no, la forma de crearlos. Básicamente tres:

  1. Texto
  2. Imágenes y sprites
  3. Experimentos Css
  4. Iconos SVG
  5. Realizaciones complejas

Y dijo ¡Léase la web!

En los inicios todo era texto. Y a él se recurría y en base a él todo se hacía. Así si deseabas contar con caracteres "especiales" debías recurrir a incluirlos mediante su codificación correspondiente. Bien fuese con las llamadas "entidades o entes html" (html entities) o el estándar Unicode. La página oficial del estándar el Unicode Consortium.

Como curiosidad, el estándar de HTML 4 define 252 entidades html. El estándar Unicode en su versión 5.1 más de cien mil y subiendo con cada nueva versión.

Con posterioridad, a estos sistemas se sumaron los distintos archivos tipográficos que incluían entre sus grafos "dibujitos". Y en los últimos tiempos hemos asistidos a toda una eclosión de tipografías iconográficas. Compuestas en su totalidad por iconos.

Las formas de uso o inclusión en el documento web también han ido aumentando. Y los requisitos para ello. En un principio las entidades y unicodes se colocaban diréctamente en el html. Formaban parte de él.

Mientras que las entidades html eran y son "universales" e independientes de la máquina que ejecute el código, con las Unicodes dependerá mucho de qué archivos tipográficos tenga el visitante (y el rango de unicodes cubierto). Aunque lo más seguro es que los más usuales de cada idioma estén.

Con posterioridad y tras la llegada y universalización del uso y soporte de Css se delega en él la tarea de mostrar estos elementos.

Formas de uso

Básicamente dos son las vías utilizadas para ello:

  1. Codificación Css en la propiedad 'content'
  2. La regla @font-face y archivos tipográficos de iconos

En el uso de los archivos tipográficos con @font-face varias son las formas de incluir los símbolos. Pero la vía de hacerlo a través de pseudoelementos es la que se está utilizando mayoritariamente en la actualidad.

Y en el caso de utilizar los símbolos unicode y para evitar la carga de un archivo excesivamente extenso, Css dispone la propiedad unicode-range.

Ventajas

Las ventajas del uso de "pictogramas" textuales son evidentes. Y de ellas ya hablamos en posts anteriores:

  1. Si eres cuidadoso al elegir el archivo tipográfico reducirás el peso de la página y las peticiones al servidor.
  2. Modificables al vuelo: tanto el tamaño como el color pueden cambiarse vía css con las propiedades propias del texto.
  3. No tiene los problemas de los sprites. Cosas como calcular las coordenadas o que se vean parte de los adyacentes.
  4. Admite todas y cada una de las propiedades de los textos, incluidas las sombras. Pero no al perímetro como box-shadow, sino a los trazos que los conforman.
  5. Te verás libre de tener que usar programas de edición de imágenes para crearlas y/o modificarlas para cada proyecto
  6. Escribe la tuya aquí :___________________

Contras

Pero como todo en esta vida, también tiene alguna espina o limitación el uso de iconos tipográficos. Por el método que sea. Peticiones, peso y tiempos de carga (comunes a cualquier elemento usado en la web) aparte, quizás la mayor limitación es la inherente a su naturaleza: texto.

Esta naturaleza obliga "per se" al uso de un sólo color en los iconos textuales. Obligatoriamente son representados con el valor de la propiedad 'color'. Este monocromatismo podemos paliarlo ligeramente. Bien con la universal text-shadow o con con alguna otra menos extendida y soportada como máscaras css, filtros, modos de fusión ... y mucha imaginación.

Experimentos Css

Por experimentos entiende realizaciones más o menos usables basadas en puro Css.

Con la eclosión de Css llegaron múltiples realizaciones basadas en él. Algunas imposibles de llevar a "producción" y otras que sí se han visto trasladadas. Pero siempre como algo de uso muy puntual y limitado en la mayoría de ocasiones a meras demos.

Tuvieron amplio eco en su día realizaciones como por ejemplo:

Sobre esta última, Pixel art Css o el uso creativo de la propiedad box-shadow, son muchos los ejemplos que podrás encontrar en la red. Posíblemente uno de los más conocido sea la Mona Lisa en puro Css. Hay incluso programas para automatizar el Pixel art Css: (1)

Imágenes y sprites

Pero anterior a todo el apartado precedente fue recurrir a imágenes para mostrar los iconos. Práctica que hoy sigue vigente en muchos sites de reconocida presencia en la red como Google, Yahoo!... con un pequeño añadido también muy veterano: los sprites Css.

Fueron presentados por A List Apart allá por 2004. Y básicamente consiste en:

  • Reunir en un solo archivo de imagen todos los "dibujitos" que se van a utilizar.
  • Mostrar sólo el trozo del archivo que contiene el "dibujito" que nos interese en cada momento con background-position.

De estos dos pasos surgen por igual los beneficios e inconvenientes de la técnica de los sprites. Por un lado la creación del archivo de imagen puede ser arduo así como el obtener las coordenadas de cada "dibujito" para posicionarlo convenientemente.

Para esta parte de creación y posicionamiento existen aplicaciones que facilitan la tarea: generador de sprite.

Otro inconveniente es la dificultad en la modificación del archivo una vez creado. Ya sea para incluir nuevas imágenes o modificar las existentes. Y pese a que el tamaño de cada imagen pueda ser modificado vía Css, tampoco es una práctica de la que debamos abusar.

Parte del sprite usado por Yahoo!

Pero si estos son secundarios o ya están resueltos, el uso de sprites Css traen aparejados una serie de ventajas nada desdeñables.

  • Reducción del peso: el peso del archivo de imagen final siempre será menor que la suma de los individuales.
  • Menos tráfico o peticiones: sólo necesitas cargar un archivo de imagen.
  • Todos los colores que quieras o necesites.
  • Personalización de los iconos: puedes construirte los tuyos propios y exclusivos para tu sitio.
  • Vistosidad de efectos sinfín con un poco de imaginación y alguna propiedad Css. Desde el cambio de valor de 'opacity', pasando por transiciones y animaciones para recrear los viejos "rollovers" hasta los más nuevos como los filtros css.

Sobre el uso de sprites Css y todo lo relativo a ellos hay multitud de literatura a tu alcance. Puedes ampliar tu conocimiento sobre ellos:

Data URI: alternativa a las imágenes tradicionales

Una alternativa al uso de imágenes en los formatos de archivos clásicos (jpg, gif...) para los pequeños iconos es el empleo de "Data URI": incluir diréctamente el recurso en el documento codificado apropiadamente. Ya sea con su MIME correspondiente en el Html o en base 64.

Viable actualmente para pequeñas (en px) imágenes, la longitud del código resultante en muchos casos lo dificultan. En el enlace del párrafo anterio (Wikipedia) tienes una lista de pros y contras.

Lógicamente, el paso de un formato de imagen típico (jpg por ejemplo) a su equivalente en base 64 no es algo que puedas hacer de forma manual. Tienes unos cuantos conversores en línea que te facilitarán la tarea.

SVG

Otro de los formatos gráficos que se ha visto potenciado en su uso es el SVG o gráficos vectoriales escalables.

Más reciente es la aparición de algunos trabajos de creación de iconos creados con SVG y modificando su apariencia con Css. como glyphter un generador en línea de iconos en SVG.

Esto los dota de una característica que las tipografías comunes no soportan: colorido. Cada icono puede tener varios colores y cambiar al :hover, por ejemplo. El escalado de su tamaño tampoco supone ningún problema, no sufren ni pixelación al aumentarlos ni pérdida de nitidez al menguar.

También hay autores que avisan de algunos peligros asociados al uso de estos nuevos formatos (data URI o SVG) especialmente en móviles, como Peter McLachlan.

Composiciones Tipografías complejas

Aquí podemos incluir trabajos que mezclan varios métodos para obtener un resultado final distinto a lo que estamos acostumbrados. En la mayoría la base es superponer varios elementos (o pseudoelementos) para obtener colorido o formas compuestas en su aspecto y comportamiento.

Algunas de estas realizaciones son:

  1. Iconic: Advanced icons for the modern web. De pago.
  2. Stackicons. "Open source and 100% free for any use"
  3. Devicons
  4. Super semantic multicolor font icons in pure CSS: iconos en cuatro colores, Css básico y webfonts.

semantic multicolor font icons

See the Pen zuwLe by Roel N (@RoelN) on CodePen.


Stackicons por Parker Bennett

Stackicons por Parker Bennett
Stackicons por Parker Bennett

Basado en el uso de @font-face y la fuente Stackicons-Social está conformado con varios elementos y sus pseudoelementos que son los que hacen posible su apariencia y comportamiento. Como es lógico, el html y Css asociado es un poco más complejo que los pictogramas textuales puros.

Recientemente su autor ha publicado este post en Css-tricks donde puedes encontrar información un poco más extensa que en su site.

Tienes disponible una demo para ver su funcionamiento en Codepen

Cuál es la forma ideal

No la hay. O al menos yo no me atrevo a sugerir una como superior a otra. Todo dependerá de las particularidades de cada situación.

Usa Data URI si sólo necesitas unos pocos y pequeños iconos, tal como hacen en la wikipedia.

Usa @font-face y tipografías de iconos si buscas sencillez y facilidad de uso.

Usa sprites Css si buscas vistosidad, variedad y un número significativo de elementos distintos.

Si lo tuyo es la imaginación, creatividad y exploración del imposible no dudes en mezclar ideas y técnicas como hacen los autores de los últimos ejemplos o un usuario habitual del blog como Furoya en este pen

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 4

  1. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hey! Dex Banner
      Se me vaya usted y su mierda de spam un poquito (más) a la mierda.

      Con cariño, pero a la mierda.

      Eliminar
  2. Buenisima entrada dentro de poco pienso publicar un sitio (bueno lo que pueda) en codepen y esto respondio mis dudas un monton. Aunque solo me quede en sprites por motivos laborales pero estare mas que ansioso de hacer experimentos con webfonts.

    Muchas gracias. como siempre tus contenido son de mucha calidad.

    ResponderEliminar
    Respuestas
    1. No te vayas a olvidar, g3kdigital, porque a mí me da un poco de vergüenza ser el único de los colaboradores con un link a sus íconos.
      Y ya que mencionaste webfonts, recordemos que no solamente son para poner dibujitos, sino que también están para compensar la falta de fuentes unicode instaladas en las máquinas cliente. Aunque para descargar sean pesadísimas (proporcionalmente a la cantidad de mapas que cubra) siguen siendo una última opción ya probada para notación matemática o griego clasico, y también para aprovechar los bloques que nos interesan aquí como dingbat, miscellaneous technical o geometric shapes, entre muchos.

      Pero ya que estoy -y prometí en alguna de las comunidades adjuntas al blog- aprovecho que el amigo Kseso nos comparte este artículo para comentar sobre unos caracteres poco conocidos y menos soportados por navegadores y SO's, por no hablar de los pocos diseñadores de fuentes que las incluyen en sus productos; pero que igual conviene aprender.

      Son los combinables, que más de alguno ya vio cuando tuvo que "fabricar" vocales acentuadas o alteradas en fuentes que no las tenían (antiguamente la mayoría sólo se ocupaba de cubrir el basic latin para escritura en inglés). Pero resulta que aparte de las combining diacritical marks, también existen caracteres que combinados con otros forman íconos, símbolos o ideogramas reconocibles.
      Por ejemplo, el caracter U+20eb (dec. 8427) es una doble barra (algo como '//') que al ser combinable retrocede el espacio de un caracter y se superpone al anterior, representando que "está anulado" o tachado. Otro más explícito es el U+20e0 (dec. 8416) que es una circunsferencia con un diámetro a 45°, lo que se conoce como "símbolo de prohibido", y que superpuesto a (por ejemplo) una letra 'E' nos daría el ícono de "prohibido estacionar". Sí, por supuesto, se pueden poner uno en rojo y el otro en negro.

      Uno de los más curiosos es el U+20e2 (dec. 8418) que simula un borde de monitor, y al encimarse al caracter precedente lo "enmarca" como si estuviese en una pantalla. El U+20e3 (dec. 8419) hace algo parecido, y lo muestra dentro de un botón de teclado.
      Las combinaciones van en gustos, como juntar el tazón U+1f375 (dec. 127861) con una virgulilla vertical combinable U+033e (dec. 830) animada a CSS, simulando así la imagen de un té caliente.

      No pongo los caracteres directamente aquí para que los vean, porque seguro no se van a ver. Todo esto es estándar, pero como dije más arriba, con muy poco soporte y voluntad de los diseñadores. Pero no está mal pasarse por cualquier mapa de unicode y darle una mirada a lo que hay y seguramente mañana se podrá usar.

      Para muestra, uno de los tantos sitios con "dibujitos" : Unicode Characters in the Miscellaneous Symbols Block.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap