How do you show the glyph icon in the Header Menu of Service Portal

[joanmarisse]

How do you show the glyph icon in the Header Menu of Service Portal?

Example, I want my Header Menu to look like this:

Please   help.

Thanks!

[chiragbagdai]

Hi Joan,

Please follow below steps to get the header menu with glyph icons in Service Portal

1. Open Widgets from left navigation.

2. Open "Header Menu" widget.

3. Select Related List 'Angular ng-templates'.

4. Open "menuTemplate" record.

5. Replace the first line with below script :

<style>
   .navbar-nav > li > a > span.menu-icon, .navbar-inverse .navbar-nav > li > a > span.menu-icon {
       display: block;
       font-size: 0.6cm;
       text-align: center;
}
.nav > li > a {
       max-height: 50px;
       padding: 15px 10px;
       margin-bottom: 10px;
}
</style>
<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}"><span class="menu-icon fa fa-{{item.glyph}}"></span>{{ item.label }}</a>

6. Update menu items with Glyph icon.

Note:

The above changes will apply to all service portals but if you want for specific portal, please clone the widgets & menuTemplate.

Let me know in-case of any question.

@Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.

Regards,

Chirag

[hrng]

Just a quick note on this for mobile views, I added the following to the CSS that would display differently based on browser width. There may be a better way to do this

@media screen and (max-width: 767px) {
   .nav > li > a {   
       max-height: 30px;   
       padding: 4px 10px;   
       margin-bottom: 4px;
   }   
       .navbar-nav > li > a > span.menu-icon, .navbar-inverse .navbar-nav > li > a > span.menu-icon {   
       display: inline-block;   
         font-size: inherit;   
       text-align: center;
           width: 15px;
           padding: 0px 5px 0px 0px;
   }
}

[alxcrlsn]

I had this question as well. Thanks for the answer!

Quick follow up question: would it work to use the sp_config GUI, open the cloned widget in the widget editor, and add the CSS there? What is the difference between adding the CSS to the Angular ng-template script, and adding it via the widget editor?