CSS Hide Text But Show Image?

Question

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?

Here: https://jsfiddle.net/hetr1whg/ – TheBosti Nov 09 '16 at 12:58 — TheBosti, Nov 09 '16 at 12:58

gilly3 · Accepted Answer · 2011-08-08T00:22:45.990

69

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

edited Aug 08 '11 at 00:22

answered Aug 08 '11 at 00:06

gilly3

87,962
25
144
176

The text is selectable and widths do vary, i got like 5 social bookmarking links next to each other, i want their paddings to be equal. – Tumay Aug 08 '11 at 00:22
@Tumay - Funny, my edit came in one second after your comment and seems to address your comment perfectly. :) – gilly3 Aug 08 '11 at 00:24

score 11 · Answer 2 · answered Aug 08 '11 at 00:07

11

You could use text-indent:

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

answered Aug 08 '11 at 00:07

Cassidy Laidlaw

1,318
1
14
24

That moves the link too. The twitter icon becomes unclickable. – gilly3 Aug 08 '11 at 00:19
this works fine when display is block, inline-block o similar – Augusto Jan 07 '22 at 13:11

score 8 · Answer 3 · edited Feb 25 '14 at 08:09

8

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

edited Feb 25 '14 at 08:09

web-tiki

99,765
32
217
249

answered Feb 25 '14 at 07:26

Thiyagesh

411
5
12

score 5 · Answer 4 · answered Aug 08 '11 at 01:49

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

OP specifically states they cannot alter the HTML. – Xavier Sep 21 '19 at 01:03 — Xavier, Sep 21 '19 at 01:03

CSS Hide Text But Show Image?

4 Answers4

Linked