How to change the "Add new Comment" text link to an image?

I wrote a short tutorial on how to do this using image replacement.

I'll repeat it here to save you the hassle of clicking through.

Use Icons for Node and Comment Links

A lot of people want to replace the boring links text with sexy icons. The easiest way to get this done is using an accessible image replacement technique. There are lots of IR methods that have been developed over the years and I'm going to show you one that I use all the time and works in all browsers, and most importantly is accessible to screen readers.

All the core links have a unique class, for example:

ul.links li.node_read_more {}
ul.links li.comment_add {}
ul.links li.comment_comments  {}
ul.links li.comment_new_comments  {}
ul.links li.blog_usernames_blog  {}

We can use the class to target a specific link with a unique icon, then apply the IR method to move the text out of the browser viewport.

The code

Lets replace the "Add New Comment" link with our sexy icon. The IR method I am using here is known as the Phark Method and is credited to a chap named Mike Rundle.

.node ul.links li {
  padding: 0 1em 0 0;
  float: left;
}

ul.links li.comment_add a {
  background: url(../images/add-new-comment.gif) no-repeat center center;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  display: block;
}

As you will see we are now floating the list items, this might cause a clearing issue, if so you can apply the clear-block class to the lists containing block element, usually a DIV, for example:

<?php if ($links): ?>
  <div class="node-links clear-block"><?php print $links; ?></div>
<?php endif; ?>

Of course you can use this for comment links as well, and for just about any other text you want to replace.