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;
}

Answer 3

left and right padding work for inline elements. so you could do something like...

HTML

<a href="some.pdf" class="pdf" />View</a>

CSS

.pdf {padding-left:12px; background:url(pdf.png) no-repeat 2px 3px;}

See this example.

Answer 4

If you're not opposed to scripting, you could do something like this with jQuery

$("a[href$='.pdf']").addClass("pdf");
$("a[href$='.doc']").addClass("doc");
$("a[href$='.rtf']").addClass("doc");
$("a[href^='mailto:']").addClass("email");

and the css

a.pdf {background: url(../images/icons/pdf_icon.png) no-repeat left center; 
padding-left: 20px; line-height: 16px;}

This puts the icon in front of the sentence/link.

Answer 5

I would also stick to an CSS pseudo-element, having a nice degrade for older browsers. IMHO people who are using IE <= v7 don't want to see beautiful websites–you may also recognize the linked file-type by reading the status-bar.

Answer 6

Use a background image, positioned to the right with no-repeat, and add padding to the right of the element equal to the width of the icon (plus a few pixels for spacing).

a.pdf {
    background: url(pdficon.png) no-repeat right center;
    padding-right: 18px; /*width of the space you want to leave for the icon*/
}