Use Icons for Node and Comment Links
- 14 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:
Technology:
Social Tags:
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
#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.”
#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?