Question

I would like to remove the text in a link and replace it with an image using css.

Markup:

<a id="notifications" href="#">Notifications</a>

Css:

#notifications{
    background: url('http://icons.iconarchive.com/icons/treetog/i/16/Floppy-Small-icon.png') no-repeat;
    height: 16px;
    width: 16px;
    text-indent: -9999px;
    overflow: hidden;
  }

JsFiddle.

I have tried all sorts of things, but can’t seem to get rid of the text. Is this something that is not doable with css?

Answer 1

As minaz pointed out, display: block will solve the issue. These other properties will also get your <a>, which is a display: inline element by default, to respect the text-indent property:

float: left|right;
position: absolute;
display: inline-block;

The W3 spec on text-indent explains why:

This property specifies the indentation of the first line of text in a
block container. More precisely, it specifies the indentation of the
first box that flows into the block’s first line box.