Placing an Icon at the End of the Link






Placing an Icon at the End of the Link

Problem

You to display icons at the end of an inline link like the ones in Figure.

Icons are placed at the end of the links


Solution

Adding a class attribute to the links, place two values for the attributes. One value is icon while the other value describes the nature of the link. In this case, the links are for an email address and a search engine:

<a href="mailto:[email protected]" class="icon email">Quote me on an estimate</a>
<a href="http://www.google.com/" class="icon search">feline nolo</a>

Provide room for the icons at the end of the links by using a class selector and the :after pseudo-class with the width, margin and height properties:

a {
 text-decoration: none;
 font-weight: bold;
}
#content a.icon:after {
 display: block;
 width: 17px;
 height: 15px;
 margin: 2px;
}

To place images at the end of links, use a different CSS rule for each icon.

Using the class selector and :after pseudo-class, the icons of an envelope and a magnifying glass are placed at the end of the links in two CSS rules:

#content a.email:after {
 content: url(email.gif);
}
#content a.search:after {
 content: url(search.gif);
}

Discussion

The setup for this solution allows for the easy editing of the design. If an icon (for email, it's a Word document icon) needs to be added at the end of a link, first add the value document within the class attribute:

<a href="/_assets/report.pdf" class="icon document">feline nolo</a>

Then add a new CSS rule to place the icon:

#content a.document:after {
 content: url(doc.gif);
}

There is another method that wouldn't require the additional markup of a class attribute and value. For example, use attribute selectors as discussed in Recipe 1.2 to place icons for email addresses at the end of links:

               #content a[href|="mailto"]:after {
 content: url(email.gif);
}

However, support for attributes selectors is limited. Also, since the solution uses content generation, it's not suitable for Internet Explorer for Windows.

See Also

Dave Shea's presentation on adding an icon with a background image in an inline link at http://www.mezzoblue.com/presentations/2006/sxsw/css/q1.html; and an explanation about why this fails in IE at http://www.brunildo.org/test/InlineBlockLayout.html.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows