How to Use ShortPoint Icons in the SharePoint Global Navigation

So you have a SharePoint global navigation ( aka top navigation, top menu ) configured, and styled using the ShortPoint Theme Builder, as in the following image, wouldn't it be more appealling if we can just add some icons next to each menu item?

If you are wondering about the same, ShortPoint already extends the SharePoint Global Navigation and allows you to utilize ShortPoint Icons anywhere in your navigation, so let's start.

Before we start:

This article explains how to add an icon to the Structural Global Navigation in SharePoint, the same concept applies also to the Managed Metadata Navigation.

Step 1:

Have two browser tabs opened at the following location:

1. Tab 1: Open a blank page in Edit mode: We will use this tab to add icons into the page, and copy them
2. Tab 2: Site Settings > Navigation: We need it to add icons into the navigation items

Step 2:

Add your desired icon into the blank page,

Let us say that we want to add a lifebuoy icon next to the Support link,

Open the ShortPoint Page Builder and choose the to Icon element,

For the purpose of this article, we will choose the icon name simple-support

You can change any other setting you may like for the icon,

And then click the Insert button to add it to the page.

Step 3:

Copy the icon into the SharePoint Navigation

We're still on the blank page, click on the three dots of the Icon element, and then Copy

On the Navigation tab, scroll down into the Structural Navigation: Editing and Sorting section,

Under Global Navigation, select the item you want to add the icon to it ( in our case it is the Support link ), and click Edit

Paste the Icon code you already copied from the blank page, and click Ok

Scroll up in the Navigation Settings page, and click Ok as well

Result:

Repeat above steps and add an icon next to every element on your Global Navigation

Sweet, isn't it?

FAQ

Q: How can I change the icon of the Home link in the Global Navigation?

A: You can do this from the ShortPoint Theme Builder > Menu > General Layout

• change the Home link style into an Icon
• choose the icon you want from the Home link icon field