CSS Hide Text But Show Image?

Question

I need to change something without touching HTML codes.

So I have this code in my HTML

 
    

        
Sha         


        

Answer 1

You could use text-indent:

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

Answer 2

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

Answer 3

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;
}

Answer 4

use text-indent with a little magic in it :)

HTML:

           <span class="share"> 
                <ul>
                    <li>Share &nbsp;&nbsp;</li>
                    <li class="twitter"><a href="#" class="twitter">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="delicious"><a href="#">delicious</a></li>
                    <li class="friendfeed"><a href="#">friendfeed</a></li>
                    <li class="addthis"><a href="#">share</a></li>
                    <div class="clear"></div>
                </ul>
            </span>

CSS:

a.twitter {
    background-image:url('../images/tt.png');
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
}

So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)