A veces necesitamos tener un icono numerado para indicar, por ejemplo, las veces que se ha entrado a un enlace, descargado un programa o, como está ahora tan de moda, puntuado una noticia. Lo primero que pensamos es en dibujar los gráficos y ya está, pero... ¿que pasa si un fichero puede que se baje quinientas veces? ¿Tenemos que dibujar quinientos simbolos iguales solo cambiando el número?

En vez de eso, podriamos dibujar los iconos usando librerias gráficas en tiempo real, con el coste de tiempo de CPU que eso supone, por no hablar de que dichas librerias raramente están disponibles en hostings gratuitos y similares, o escribir un programa en nuestro propio ordenador que dibuje todos los iconos, con lo que nos podriamos juntar con quinientos .gif en la carpeta de la página.

Por estos y otros problemas, vamos a usar CSS para mostrar los iconos, que es mucho más fácil, rápido, elegante y posiblemente hasta lave más blanco.

Primero necesitamos el gráfico, que dibujaremos tradicionalmente con nuestra herramienta de dibujo favorita, que da igual cual sea mientras podamos grabar con transparencias, a ser posible .gif dados los problemas que tiene el internet explorer mostrando transparencias png.

Ese dibujo lo usaremos como fondo de un div, y usaremos el pequeño truco de definir la altura de la linea linea de texto para centrar el texto verticalmente. Resumiendo, usaremos el siguiente css que no tiene más misterio que los tamaños en pixeles, que se corresponden con el tamaño del gráfico del fondo.

.contador
{
  font: 20px Tahoma;
  text-align: center;
  background: url(estrellita.gif);
  color: #fff;
  width: 60px;
  height: 60px;
  float: left;
  line-height:60px;
}

Una vez incluido el css, para generar los iconos basta un simple html como este: <span class="contador">48</span>.

1 2 3 4 5 200 14 27