Cuando creamos una lista en HTML, por cada elemento de la lista, podemos detectar dos partes: la marca o hito que inicia el elemento y el texto del item de la lista. Gracias a CSS podemos conseguir que los hitos de las listas sean imágenes, incrementando así el número de iconografias ofrecidas por la especificación de HTML (circulo, cuadrado y elipse).

Para poner una imágen en el hito del item de la lista utilizaremos la propiedad list-item-image.

OL {
   list-style-image: url(miimagen.jgp);
}

El nombre del fichero que contiene la imágen deberá de especificarse mediante una URL: url (url_del_fichero). Donde la URL podrá ser relativa (../imagenes/documento.gif)) o absoluta (http://www.aulambra.com/imagenes/documento.gif).

Si utilizamos imágenes como hitos podemos tomar la precaución de espeficar un estilo sobre los items por si acaso el navegador no encuentra el fichero con la imágen. Los estilos los especificamos mediante la propiedad list-style-type.

OL {
   list-style-image: url(miimagen.jgp);
   list-style-type: square;
}