Imagen de fondo dentro de una lista

[sergi_multimedia]

Hola a tod@s, a ver si me podéis ayudar...quiero hacer una lista y en cada fila poner una imagen descriptiva.

Aquí he subido lo que he hecho:

http://s310876771.mialojamiento.es/contacte.html

Como veréis, en el principio está la imagen pero las letras están justo encima, yo lo que quiero es que haya un espacio entre la imagen y las letras, o sea, que no se sobrepongan unas a las otras.

Código HTML:

<ul id="contacte">
    
        <li class="casa">C/ Física, 2, Pol.Ind. La Ferreria</li>
        <li class="mon">08110 | Montcada i Reixac (Barcelona)</li>
        <li class="telefon">Tel [phone]</li>
        <li class="fax">Fax [phone]</li>
        <li class="email">[email protected]</li>
    
    </ul>
 

Código CSS:

#contacte {
 
list-style: none;
 
}
 
.casa {
background: url(imatges/icones/casa_20.png) no-repeat;
}
 
.mon {
background: url(imatges/icones/mon_20.png) no-repeat;
}
 
.email {
background: url(imatges/icones/email_20.png) no-repeat;
}
 
.fax {
background: url(imatges/icones/fax_20.png) no-repeat;
}
 
.telefon {
background: url(imatges/icones/telefon_20.png) no-repeat;
}
 

He probado de posicionar las imágenes, pero siempre se queda debajo de las letras.

Gracias de antemano