SharePoint: Icon doesn't show for Publishing Hyperlink

Ran into this today. Very strange problem. For whatever reason, the "Display icon" functionality of the Publishing Hyperlink field doesn't work on SharePoint 2010 Server for a site with Publishing enabled. Added URLs to a column of that type for PDF files, but no PDF icons appeared. In fact, the value for the "Display icon" field wasn't "sticky" -- it kept getting unchecked. This article saved the day, with a very easy, non-coding solution using only CSS attribute selectors.

I'm using a custom page layout in my publishing pages with an attached CSS file; in that file, I added the following items to correspond to the location of my icon files (inside SiteAssets); I also added .docx for Word 2007+ document types and .xlsx for Excel 2007+ docs:

a[href$='.pdf'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_pdf_16x16.gif) center left no-repeat;

}

a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.docx'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_doc_16x16.gif) center left no-repeat;

}

a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_zip_16x16.gif) center left no-repeat;

}

a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.xlxs'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_xls_16x16.gif) center left no-repeat;

}

The CSS works by finding all anchor tags with an href attribute that ends (using the dollar symbol $) with the specified string; so for PDFs, it uses a[href$='.pdf'] and applies the style rules. And we're only interested in those 4 file types, so those are the ones that have icons in our CSS file.

Reloaded the page and viola! The icon appears to the left of the item as if by magic :)

Also, the article from psyked has links to some nice (and free) icon libraries. All in all, a very good solution. However, we still don't know what's causing the built-in "Display icon" functionality to not work.

Hope this helps others. Thanks.