Icon doesn't show for Publishing Hyperlink

Question

I've got a list with a Publishing Hyperlink column. A couple of the records point to PDFs, and I've tried checking the "Display icon" checkbox. No matter how many times I check the box, it shows it as unchecked when I go back to edit the field. Very strange.

When I drop a view of the list on a publishing page, the URL has no PDF icon next to it. What am I doing wrong? Thanks.

Answer 1

For whatever reason, the "Display icon" functionality of the Publishing Hyperlink field doesn't work on our SharePoint 2010 Server for a team site with Publishing enabled. We 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. So we found this article that describes 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;
}

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.