What's the best practice(s) to place an icon before or after links to indicate file type (ex: linking Adobe PDF, audio or video)

Question

My team was debating what the best practice would be for wanting to insert an icon after links to the various media file types we have on our site. Examples would be linking to a PDF and wanting to insert an icon image to let users know it's a PDF. The same could be used for video or audio files.

I suggested using CSS, putting a class on the and using :after to create an element.

I recall IE6 and IE7 won't support the pseudo CSS class, but aside from that, would there be a better practice?

If the links were in an unordered list, I know the icon image could be used to replace a bullet character, but I wasn't sure about paragraphs or other HTML elements.

Answer 1

You can use before or after pseudo classes and I think that would be one way to go,

However you could just do it by adding a bit of extra padding to your link and inputting a background image, and you shouldn't need to add classes either as you can use substring attribute selectors to select (target) the links via their extension..

e.g.

a[href$='.pdf'] {
  background: transparent url(pdf-icon.gif) center right no-repeat;
  padding-right: 20px;
}

using the attribute selector would also work for your :before or :after generated elements too, and these you could make into an inline-block big enough to contain the image as a background too.

e.g.

a[href$='.pdf']:after {
   content: url(pdf-icon.gif);
   margin-left: 4px;
   display: inline-block;
   width: 12px;
   height: 12px;
}

check out this page for more explanation

Answer 2

Easy way to bring pdf or other icon with each link using CSS3:

1. icon through background image -> CSS Code:

a[href$=".pdf"]
{
  background:url("your-pdf-image.png") no-repeat left;
  padding-left:25px;
}

2. bring icon from FontAwesome -> CSS Code:

a[href$=".pdf"]:before
{
  content:"\f1c1  "; /* here you can paste the icon content from fontawesome, like word, excel, pdf,etc.. */
  font-family: fontawesome;
}