How to add custom file icons on SharePoint 2010 document library?

All replies

• 

  

  0

  Sign in to vote

  Hi. I believe it's just a matter of adding the custom Icon to the 14 HIVE, TEMPLATE\IMAGES, adding that entry on the DOCICON.xml, on every server.

  How did the PDF icon get in there ? It's not on the default installation.

  Sunday, March 1, 2015 7:37 PM
• 

  

  0

  Sign in to vote

  Hi,

  From your description, I know you want to add an icon for your custom file.

  As Nuno said, you could add your custom icon by adding an icon image to “\Template\Images” and changing Docicon.xml in “\Template\XML”.

  You could refer to these article:

  Add Additional File Type Icons to SharePoint 2010

  http://www.deliveron.com/blog/post/Add-Additional-File-Type-Icons-to-SharePoint-2010.aspx

  SharePoint 2010 show PDF icon in document libraries

  http://support.risualblogs.com/blog/2011/05/05/sharepoint-2010-show-pdf-icon-in-document-libraries/.

  Best Regards

  ---

  Vincent Han
  TechNet Community Support

  

  Monday, March 2, 2015 8:40 AM
• 

  

  0

  Sign in to vote

  Is there any other way (other than editing the files in 14 hive)? Our boss will not allow it as he does not consider this under good/best practices.

  Thank you.

  Monday, March 2, 2015 5:44 PM
• 

  

  0

  Sign in to vote

  Hi,

  You could accomplish your requirement by using jQuery with these steps, and this code is using jQuery to modify it on the current page, if you would like to make it work on all library, you need to choose the former method or add this JQuery script on all library pages manually:

  1. Upload a custom icon to file “14\ Template\Images” or your SharePoint document library.
  2. Add this code below in the document library that you want to extend your custom icon, you could add code by following these: Click edit page in the document library -> add a web part -> choose Content Editor -> click edit source in the Ribbon -> add the source below -> click OK.

  <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">
  
  $(document).ready(function(){
  
  var fileObject = $("[title$='docx']");
  
  for(var i=0; i < fileObject.length; i++){
  
    //fileObject[i].outerHTML="<img width=\"16\" height=\"16\" title=\"test.docx\" alt=\"test.docx\" src=\"/_layouts/15/images/custom.png\" border=\"0\">";  // upload your custom icon to file ” 14\ Template\Images”, replace your src URL
  
    fileObject[i].outerHTML="<img width=\"16\" height=\"16\" title=\"test.docx\" alt=\"test.docx\" src=\"/sites/sharepoint2013/Shared%20Documents/custom.png\" border=\"0\">"; // upload your custom icon to SharePoint document library, replace your src URL
  
  }
  
  })
  
  </script>
  

  
  

  The screenshot below is my result:

  

  Best Regards

  ---

  Vincent Han
  TechNet Community Support

  

  
  

  • Edited by Vincent.Han Tuesday, March 3, 2015 6:16 AM
  • Proposed as answer by Rebecca Tu Monday, March 9, 2015 6:41 AM
  • Marked as answer by star.wars Tuesday, March 10, 2015 9:19 AM

  Tuesday, March 3, 2015 6:15 AM