How to Add File Type Icons in WordPress Using CSS Attribute Selectors

One of the fascinating aspects of web design is the continuous learning process. Recently, I discovered an elegant solution for displaying icons next to specific file type links in WordPress without relying on plugins or manual class assignments.

My original approach was to use a CSS class with a background image icon to style link text, which would require adding the class to each link either manually or with JavaScript. While I was on the right track, I found a much more efficient solution using CSS attribute selectors.

Using CSS Attribute Selectors for WordPress File Type Icons

The CSS3 Selector Module introduced powerful “Substring Matching Attribute Selectors” that make targeting specific file types remarkably simple. Although there are three such selectors, we’ll focus on the most useful one for adding file type icons in WordPress – the “ends with” selector: [att$=val].

The “Ends With” Selector: [att$=val]

This selector allows us to target elements where a specified attribute (like the href attribute of a link) ends with a particular string (such as “.pdf”, “.docx”, or “.mp3”). This is perfect for automatically adding icons to file links based on their extension.

Syntax

element[att$=val]

Examples

a[href$=".pdf"] /* Targets all links ending with .pdf */
p[title$="World"] /* Targets all paragraphs with titles ending in "World" */

Implementing File Type Icons in WordPress with CSS

To add icons to all PDF links in a WordPress theme, simply add the following code to your theme’s style.css file:

/* PDF document links */
a[href$='.pdf'] {
    background: transparent url(images/pdficon_small.png) center left no-repeat;
    display: inline-block;
    padding-left: 24px;
    line-height: 24px;
}

This CSS targets any link that ends with ‘.pdf’ and adds a PDF icon to the left of the link text. The beauty of this approach is that it works automatically without modifying your HTML or adding classes.

Extending the Technique for Multiple File Types

You can easily expand this approach to support multiple file types by adding more selectors:

/* Document file types */
a[href$='.pdf'] {
    background-image: url(images/icon-pdf.png);
}

a[href$='.doc'], a[href$='.docx'] {
    background-image: url(images/icon-word.png);
}

a[href$='.xls'], a[href$='.xlsx'] {
    background-image: url(images/icon-excel.png);
}

/* Common styling for all document links */
a[href$='.pdf'], 
a[href$='.doc'], a[href$='.docx'], 
a[href$='.xls'], a[href$='.xlsx'] {
    background-position: center left;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 24px;
    line-height: 24px;
    margin-right: 10px;
}

Modern Approaches: Using SVG Icons and Font Icons

While PNG icons work well, modern websites often use SVG icons or icon fonts for better scaling and performance. Here’s how you could implement the same technique with Font Awesome icons:

/* Add Font Awesome support if not already included */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* PDF document links with Font Awesome */
a[href$='.pdf']::before {
    font-family: 'Font Awesome 6 Free';
    content: '\f1c1'; /* PDF icon */
    display: inline-block;
    margin-right: 6px;
    font-weight: 900;
}

/* Word document links */
a[href$='.doc']::before,
a[href$='.docx']::before {
    font-family: 'Font Awesome 6 Free';
    content: '\f1c2'; /* Word icon */
    display: inline-block;
    margin-right: 6px;
    font-weight: 900;
}

Handling Case Sensitivity

One limitation of the basic selector is case sensitivity. To target file extensions regardless of case (like .PDF, .Pdf, etc.), use the case-insensitive attribute selector with the i modifier (supported in modern browsers):

a[href$='.pdf' i] {
    background-image: url(images/icon-pdf.png);
}

Plugin Alternative

If you prefer a no-code solution, plugins like FileType Icons can accomplish similar results. However, the CSS method described above is more lightweight and doesn’t add the overhead of another plugin.

Conclusion

Using CSS attribute selectors to add file type icons in WordPress is an elegant, efficient solution that works automatically without modifying your content. This approach is lightweight, requires no JavaScript, and works across your entire site with minimal code.

Last updated: April 2025 – Information verified for WordPress 6.4 and modern browsers.