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


12 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
  3. Max

    July 31, 2018

    Hi Joao,

    Thanks for sharing your code. It’s amazing. I like the simple addition of icons. That’s great. But one thing worries me and this is the missing icon after clicking on the link in the menu. Files are loaded normally, but the icons don’t.

    Reply
    • João Ferreira

      July 31, 2018

      Hi Max,

      Can you please press F12 and check if you any script error in the console, also let me know what version of SharePoint are you using.
      I was not able to reproduce this issue locally.

      Reply
  4. Max

    August 3, 2018

    Sharepoint 2016 on-premise. Console is empty. JS Script and CSS exist in Source Code. Even in the Cisar for Chrome extension, I see that the files have been loaded. In Chrome, I see a square icon instead of the icons. Edge and IE do not display anything. Maybe a problem with FabricUI? I dont know.

    Reply
    • João Ferreira

      August 3, 2018

      Hi Max,

      This can be caused by the font being used by default.
      The solution is using the Microsoft CDN by default to get the icons if you don’t have external access it will not render the icons.
      To avoid this you can modify the solution and use the local fonts that are also included.
      Do the following steps to used the local version of the font.

      1. Open the site with SharePoint Designer
      2. Go to All Files -> Style Library -> fabricMenuIcons -> css
      3. Check out the fabricMenuIcons.css
      4. Comment the first @fontface block and uncomment the second one
      5. Check in the file and publish the major version
      6. Refresh your browser using CTRL + F5
      Reply
      • Max

        August 6, 2018

        Unfortunately, the problem still persists.

        Reply
        • João Ferreira

          August 8, 2018

          Hi Max,

          Can you please check on Google Dev Tools is the woof2 font is being loaded.
          If you are using SharePoint on Prem the font type might be blocked on your web config.

          Reply
          • Max

            August 16, 2018

            I see icons when master page is loaded, but after I click on any link in the menu, icons will disappear. Will he help you if I make a video?

          • João Ferreira

            August 16, 2018

            Hi Max,

            Please let me know if you have the minimal download strategy feature enabled?

  5. Max

    August 17, 2018

    Yes, it is active. After disable this feature a problem is gone.

    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.