CODEWITHSUNDEEP
htmlcss
Tumay
Tumay

Reputation: 498

CSS Hide Text But Show Image?

I need to change something without touching HTML codes.

So I have this code in my HTML

<span class="share"> 
    <ul>
        <li>Share &nbsp;&nbsp;</li>
        <li class="twitter"><a href="#">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>

and this in CSS

.twitter {
    background: url('../images/tt.png') no-repeat; 
    width:      10px; 
    height:     14px;
}

This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.

Is it possible to do without touching HTML Codes?

Upvotes: 29

Views: 70711

Answers (4)

Thiyagesh
Thiyagesh

Reputation: 411

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

Upvotes: 8

Zhianc
Zhianc

Reputation: 1451

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

Upvotes: 5

gilly3
gilly3

Reputation: 91467

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

Upvotes: 70

Cassidy Laidlaw
Cassidy Laidlaw

Reputation: 1368

You could use text-indent:

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

Upvotes: 11

Related Questions