CSS Hide Text But Show Image?

Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:

.twitter a, .twitter a:link, .twitter a:visited
{
    color: transparent;
}

Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:

.twitter a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

Try making your font-size : 0px; in your css.

You could use text-indent:

text-indent: -9999px; /* get rid of any text */