Skip to main content

Drupal Themes

Our feature packed Drupal themes combine beautiful design with over 70 optional settings, our easy to use administration theme and all backed by our no fuss money back guarantee.

Drupal Design

Blow away the competition with our full service graphic design services. We focus on audience demands & brand identity to set the tone of your internet business strategies.

Drupal Designers and Themers Community

Join the first crowd sourced premium Drupal theme service. Become a rockstar designer or themer, share the profits and get exposure to a half million Drupal users.

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.

Drupal Version: 

Drupal Development: 

Drupal: 

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,

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <h2> <h3> <h4> <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Adds typographic refinements.

More information about formatting options