Use Icons for Node and Comment Links
- 10 Comments
- Latest Comment
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
#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.
#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?
#9 great tip thank you for
great tip thank you for sharing online casinos
#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?