Skip to main content

Use Icons for Node and Comment Links

Post to Twitter

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/sexy-icon.png) 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.

Comments

#1 other areas for icons

node and comment links are a great place to add icons. do you use any modules like iconify?

i also like to add them to the navigation menu which requires this theme override: http://drupal.org/node/423140

i’ve also submitted a patch for drupal 7 that would add the ability to add icons to the ‘create content’ page: http://drupal.org/node/439350

do you have a standard base of icons that you use or does it depend on the project?

#2 Nice tip!

I do a lot of icons in links. It really seems to pull a site together. One suggestion though is to use CSS sprites if you are doing a lot of icons. It really helps out on the page load time.

#3 ...

I have a lot of icons, thousands of them in fact, I just use what looks right per project. I think it would be very nice if Drupal core had a set of icons for various operations, I think D7 will have this.

#4 Great Article

It’s nice to see good examples of using image replacement techniques with Drupal. I’ve been using the method of setting the div height to 0 but I think I might give this way a shot for my next project.

Keep up the good work.

#5 @#4, Jeff - setting the div

@#4, Jeff - setting the div to height:0 might cause an accessibility problem with some screen readers, similar to display none or visibility hidden does. The Phark method is accessible which is why I use it a lot. Thanks for the feedback!

#6 standard base

do you have a standard base of icons that you use or does it depend on the project?

#7 Standards base

^^ yeah like above comment, do you have the standards icon project?

#8 Depends on the Drupal project

Depends on the Drupal project at hand, sometimes we might commission icons from a designer, most times budgets don’t stretch to that (they can be very expensive) so we just try to match something that goes with the overall design, either from our library or purchasing an icon set.

#9 great tip thank you for

great tip thank you for sharing online casinos

#10 OKAY!

Awwww….man thanks for showing me this I have some new Drupal sites up and have been searching Google for this, thanks a tons.

Best Regards
 Jay,

#11 Hello there, possibly u might

Hello there, possibly u might be able to help me? I saw you are using drupal on your web site. I recently have decided to create a blog for myself and i am currently making use of one of the free blog services available in my country, however i would really like to make my own hosted blog using my personal site name. I lately read about Drupal and i was thinking maybe you could tell me where i may be able to find decent training or videos on how to make use of drupal properly? Thanks alot.

#12 http://www.deslay.com/

Free Numerology Reading
Psychics, Free online psychic readings, Free astrology reading, Free Tarot Reading, Career Forecasting, Psychic advice, tarot cards, Astrology psychics

#13 http://www.destle.com

Don t worry if you are nervous about psychic reading our site offers free online psychic chat advice for the first time. Destle.com free psychic chat
free psychic reading online

#14 i like this pronocunce

I like this woman. She included that all voices within those communities, whether it be directly or through local organizations, must be heard. fx15iyinet frmtr trkygnclr webmaster seo yarışmasıiyinet frmtr trkygnclr webmaster seo yarışmasıiyinet frmtr trkygnclr webmaster seo yarışmasıiyinet frmtr trkygnclr webmaster seo yarışmasıare particularly vulnerable to discrimination on any other grounds, including gender, ethnicity, or disability.”