How to use with a[href$=".pdf"]

[paul.f...@gmail.com]

I currently use the following css to automatically add a PDF icon image to links to pdf files (and other file types):

a[href$=".pdf"] {
background: url(../images/layout/pdf.gif) no-repeat right top;
padding-right: 20px;
}

How should I modify this to use an icon font if this is the css for inserting it as a class:

.icon-file-pdf:before {
content: "\e002";
}

[paul.f...@gmail.com]

I think I've found a way, but it would be nice to know if it's the best solution.

a[href$=".pdf"]:before {
content: "\e002";
font-family: 'name-of-icon-font';
padding-right: 0.3em;
}

[Keyamoon]

That's a good solution. An alternative would be to manually give a class to every pdf link. Using classes would give you better selector performance. But if you like to have a dynamic solution, use your own attribute selector solution.

"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil." -Donald Knuth

[paul.f...@gmail.com]

I'm using this in ExpressionEngine CMS and links could be addd by users in a wysiwyg textarea, so adding classes would probably need javascript, which doesn't sound very efficient.

[stacie....@gmail.com]

Put the links in a containing div with a class and target them that way.