Customize SharePoint Menu with icons

The site menu is where the user get his focus when he wants to navigate in a web site, in this article I’ll teach you how add icons to it to make the navigation more intuitive.

A few considerations before we start:

This article is specific for the Bind Menu and will only work with the Bind Tuning themes
The icons used are from the Font Awesome that is included in the themes

The default SharePoint menu does not accept any html, it just work with plain text but with the use of the Reusable Content List and a custom script we can change this behavior.

The Reusable Content List

The Reusable Content list is a collection of content that you create for your site collection that is stored as items in a list. Each item of reusable content can consist of either HTML or plain text and can be designated as either automatically updated or not.

Reusable content that consists of HTML can contain text and HTML elements, such as images and icons.

These HTML elements can be styled or formatted as needed. You can use reusable content to create branded HTML items that need to be exactly the same across your site collection, such as the icons for the menu.

To open the Reusable Content list on your SharePoint site go to Settings –> Site Contents and click on the Reusable Content tile to Open it.

At the top of the list click in the New Item option, this will open a new form where you can introduce the details for the menu items.

In the title field type the name of the Menu, in the reusable html field click to add the html for the icon, once the text box got focus click in the Edit Source option in the tool bar it is located in the Format Text tab.

In the HTML Editor you should put the code for the icon something like the example bellow.

 <i style="padding-right:6px;" class="fa fa-home"></i>

Before you save it make sure that you can see the icon in the Reusable HTML field, if you see the html code you missed the Edit Source step described above.

Repeat this process for all the menu items where you want to have an icon.

Add the custom script

To append the icons to the menu we will need a custom script that will read the icons from the list.

1 - Open your site with the SharePoint designer

2 - Go to All Files –> Style Library –> YOUR THEME NAME -> JS

3 - In the tool bar click File –> Java Script

4 - Name it menuIcons.js

5 - Right click on it, check out the file and edit it in advanced mode

6 - Copy the code bellow and paste it in the new file

(function ($) {
	$(document).ready(function () {

	//Get Elements from the Reusable Content list 
	var url = document.URL;
	if(url.indexOf("https://") != -1)
	{
		var urllink = document.location.href.replace("https://","");
		var prefix = "https://";
	}
	else
	{
		var urllink = document.location.href.replace("http://","");
		var prefix = "http://";
	}	
	
	var link;
	if(urllink.indexOf("sites")!=-1)
		link = (urllink.split("/"))[0]+"/"+(urllink.split("/"))[1]+"/"+(urllink.split("/"))[2];
	else
		link = (urllink.split("/"))[0];
		
	var soapEnv =
		"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
			 <soapenv:Body> \
				  <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
					<listName>Reusable Content</listName> \
				 </GetListItems> \
			 </soapenv:Body> \
		</soapenv:Envelope>";

		$.ajax({
			url: prefix+link+"/_vti_bin/lists.asmx",
			type: "POST",
			dataType: "xml",
			data: soapEnv,
			complete: processResult,
			contentType: "text/xml; charset=\"utf-8\""
		});

	
	var listNames = new Array();
	var icon = new Array();
	
	function processResult(xData, status) {
		$(xData.responseXML).find("z\\:row, row").each(function() 
		{			
			listNames.push($(this).attr('ows_Title'));
			icon.push($(this).attr('ows_ReusableHtml'));

		});
		
		$('.menu-item-text').each(function()
		{		
			for (var i=0; i<icon.length; i++)
			{
				if($(this).text().toString().toLowerCase() == listNames[i].toString().toLowerCase())
				{
					$( this ).html(icon[i] + $(this).text());
				}
			}		
		});		
	};
	});
})(jQuery);

7 - Save the file, check it in and if asked publish the major version

8 - Go To All Files -> _catalogs -> masterpage -> YOUR THEME NAME

9 - Check out and edit in advanced mode the master page you are using

10 - At the top of the master page locate the block where the scripts are defined and add a new line for the menuIcons.js