«
»

Prefixing Icons to Hyperlinks

link_icons

As shown in the image above icons can easily be prefixed to hyperlinks using the technique described below. The best part is that you do not have to muddle you HTML markup with extra image tags.  The steps involved to implement this are simple:

  1. Identify which links you want to prepend an icon to.  Use the attribute value selector to match the end of the attribute value with a file extension.
  2. Use a small gif, jpeg, or png image as the background-image for the particular link.
  3. Set the background-repeat to no-repeat.
  4. Set the padding left to the width of the icon.

This CSS was used to create the example shown above.

[href$='doc']{
      background-image: url(doc-type-doc.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='xls']{
      background-image: url(doc-type-xls.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='jpg']{
      background-image: url(doc-type-jpg.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }
 
 [href$='ppt']{
      background-image: url(doc-type-ppt.png);
      background-repeat: no-repeat;
      padding-left: 18px;
 }

Now any hyperlinks whose names end in doc, xls, jpg, or ppt will show the appropriate icon. The link below would display the doc icon in front of it.

<a href="files/report.doc">Annual Report</a>

Identifying External Links

The same technique can be used to identify links that lead to external sites.

[href^='http://']{
      background-image: url(external-site.png);
      background-repeat: no-repeat;
      padding-left: 18px;
}
<a href="http://www.google.com">Google</a>

Now any link beginning with http:// will have a special icon that informs the user that by clicking the link they will be take off of your site.

Leave a Reply