Customize SharePoint menus with Fabric UI icons and images

Today I’m revisiting one of the first articles and customizations I did for SharePoint, a couple years ago I wrote a custom script to personalize SharePoint menu with icons using Font Awesome.

My previous solution was not easy to setup and had a few dependencies that might not work for all users, to overcome this I’ve decided to write a new version that automates the entire process and provides interfaces to manage the icons.

Since the release of the first solution a lot changed on SharePoint and Microsoft provided its own front-end framework, with this in mind I decided to replace Font Awesome by Fabric UI Icons.

System Requirements

The Fabric Menu Icons solution was designed for classic SharePoint and is provided as a declarative sandbox solution, it’s compatible with the following versions:

  • SharePoint 2013
  • SharePoint 2016
  • SharePoint Online (Classic Experience)

How to install the Fabric Menu Icons

  1. Download the solution
  2. On your site collection root site go to Settings Site Settings Solutions
  3. Upload and activate the solution, once you activate the solution Fabric Menu Icons script is immediately added to your site
    Note: If you are using SharePoint Online Classic Experience and don’t see the Solutions options you need to enable custom scripts in your tenant. Detailed instructions can be found here.

    SharePoint Feature Properties
  4. Once the solution is activated you will get all the files in your site collection and new custom list where all the menu customizations will be stored

Setup Fabric Menu Icons

Fabric Menu Icons support structural and meta data navigation and works with and without publishing features enabled.

If you are using Publishing Features, follow the steps bellow:

  1. On your site collection root site go to Settings Site Settings Navigation
  2. With the solution enabled you will get a new option Menu Icons as shown in the image below
  3. Click on Manage Menu Icons
  4. Fill the form to start customizing your menu

If you are not using Publishing Features, follow the steps bellow:

  1. On your site collection root site go to Settings Site Settings Quick Launch
  2. With the solution enabled you will get a new option Menu Icons as shown in the image below
  3. Click on Manage Menu Icons
  4. Fill the form to start customizing your menu

As always you can get the solution project from GitHub, links to the project and to the solution file are available below.

Download Frabric Menu Icons WSP
Explore Solution on GitHub

Designed by Makyzz / Freepik


3 Responses to “Customize SharePoint menus with Fabric UI icons and images”

  1. Max

    July 3, 2018

    Hi Joao, very good post. Thanks for sharing your code.

    If I use Oslo master page, the icon doesn’t appear on the menu. I have fix it by updating the class name.

    I have change a little bit your code (fabricMenuIcons.js line137):
    // use $(‘#DeltaTopNavigation .menu-item-text’) for Seattle Master Page
    // use $(‘#DeltaHorizontalQuickLaunch .menu-item-text’) for Oslo Master Page
    var horizontalMenuItemsText = ($(‘#DeltaTopNavigation .menu-item-text’).length == 0 ? $(‘#DeltaHorizontalQuickLaunch .menu-item-text’) : $(‘#DeltaTopNavigation .menu-item-text’));

    I will make a pull request in your git 😉

    Reply
    • João Ferreira

      July 3, 2018

      Hi Max,

      Thanks for your contribution, I’ll create a new package with your fix 😉

      Reply
  2. Jeff

    July 4, 2018

    Going to use it for my new customer project 🙂 Thanks

    Reply

Leave a Reply


Web developer focused on SharePoint branding, blogger, tech enthusiast. Travelling and sports are my addictions, knowledge and success are my daily motivations.