Combining font icon and Image Replacement

Question

My HTML is like this:

<li><a href="fbpage" class="icon-facebook">Facebook</a></li>

I'm using the fontello icon font system however, I can't seem to work out how to make the word Facebook disappear and the icon remain! The generated content looks like this:

<li><a href="fbpage" class="icon-facebook">:before "Facebook"</a></li>

Thanks

(note: I know I can add a span to the text and toggle it but I thought there may have been a purely CSS way to do it?)

Answer 1

This is one way

.icon-facebook {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

.icon-facebook {
    outline: none;  /* prevents dotted line when link is active */
}

and there's also another. I found this question answered here: Hide text using css