Text image replacement within a link

Question

I am trying to replace some navigation text with images. I've applied the images as backgrounds, but the text-indent: -9999px trick doesn't seem to be working. If I apply it to the nav holding the links, the links and images disappear entirely. If I apply it to the links themselves, nothing changes. This replacement is being made to a frequently updated Wordpress Plugin, so changing the HTML code would be prohibitive.

<nav class="webcomic-above">
<a href="#" class="webcomic-link webcomic1-link first-webcomic-link first-webcomic1-link">&laquo;</a>
<a href="#" class="webcomic-link webcomic1-link previous-webcomic-link previous-webcomic1-link" rel="prev">&lsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link random-webcomic-link random-webcomic1-link">&infin;</a>
<a href="#" class="webcomic-link webcomic1-link next-webcomic-link next-webcomic1-link current-webcomic" rel="next">&rsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link last-webcomic-link last-webcomic1-link current-webcomic">&raquo;</a>

.webcomic-above a.first-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/first-arrow.gif) 0 0 no-repeat;
padding:2px 12px; 
 }
.webcomic-above a.previous-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/previous-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.next-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/next-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.last-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/last-arrow.gif) 0 0 no-repeat;
padding:2px 12px;
}

http://jsfiddle.net/AHUn4/

Answer 1

Make the a elements inline-block, then text-indent will have an effect on them.

UPDATED EXAMPLE HERE

.webcomic-above a {
    text-indent: -9999px;
    display:inline-block;
}

According to documentation, text-indent applies to block elements. The anchor elements are inline by default. Making them inline-block essentially fixes this.

Answer 2

You can use: color:transparent; to make the text, well, transparent.