Displaying a small icon next to an external link
As an added aid for usability, it is useful to add a small icon next to external links to let users know that the link will take them off the site.
The icon of a square above another square (and sometimes with an arrow) is a strong convention on the web to indicate the link is pointing to an external site. Setting this up is rather straightforward.
First, you must add a class to all links that are external. You may also use the rel attribute, and set it to something like external, however, the CSS selector required to select these elements will not work in IE6. If you're not relying on the icons being set, you could also get away with using a bit of jQuery (based on the CSS3 selector), as in example 1.
Example 1
$(document).ready(function() {
$('a[href^=http://]').addClass('external-link');
});Once you have a class set up for all external links, setting up the small icon is fairly trivial. There are a number of ways to do this - but I'll show you in Example 2 the one I've used before in the past.
Example 2
a.external-link {
background: url(/images/external-link-icon.png) no-repeat left center;
padding: 0.3em 0 0.3em 30px;
}Depending on the size of the image, the top and bottom padding may be optional. If the icon is roughly the same size as the line height of the text, you can generally get away with just setting the padding-left property.
Example 3
As you can see, the small icon is a great usability aid, and a nice touch to let your site's visitors know you are about to leave the page if you click the link. The icon could probably also be interpreted as a new window link, but I think the two are almost interchangeable.
Comments
No comments yet.
Leave a Comment
Note: Your comment may require approval before it is posted to the site.