Stesso markup html, visualizzare o testo o icona.. come?

[strae]

Ciao ragazzi, ho un piccolo problema, allora, poniamo che io ho questo semplicissimo markup html:

<div id="lower-menu">
    <div class="l-m-icons" id="treasure">
        Treasure!
    </div>
    <div class="l-m-icons" id="pirates">
        Pirates!
    </div>
</div> 

Il markup è molto semplice, e vorrei mantenerlo tale.. tuttavia posso modificarlo come voglio, se quello che chiedo non è fattibile con quello.
Allora, io vorrei che dai CSS si potesse fare in modo che i due div con class 'l-m-icons' fossero visualizzati solo come due icone, ad esempio di 24px, e che il testo dentro ('Treasure!', 'Pirates!') venga nascosto.
Oppure, cambiando solo il css,che venga mostrato solo la scritta, che sò, in grassetto.

Ho fatto un paio di prove:

/* versione con icona, testo nascosto */
div#lower-menu div.l-m-icons{
    width: 24px;
    height: 24px;
    margin: 2px 5px;
    overflow: hidden;
}

div#treasure{
    background-image: url('images/icons/treasure.gif');
} 

Ma non riesco a nascondere il testo dentro il div.
E' possibile farlo?