3

When customizing the Quick Launch Links Navigation, I got stuck with adding Font Awesome Icons. How do I go about it so that it appears like the ones in the picture below?

enter image description here

And the code is as below:

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item {
 /*Style each menu item*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
 /*Style on hove sub items*/}  .ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
 /*Style selected top level item*/}  .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
 /*Style top level mouse hover*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a { 
 /*Style sub level mouse hove*/}  .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
 /*Style selected sub item*/}  .ms-core-listMenu-verticalBox a.selected {
 /*Style Selected Item*/}  .ms-core-listMenu-verticalBox UL.root UL {
 /*Style Outer Box*/}
  • 1
    This will be tough to implement via CSS. I think you can use jQuery/JavaScript to add icons to the elements dynamically based on the "Text". Like if text = "Home" then add this image etc. Another option is to create the complete heading as an image and then use it. – Amal Hashim Nov 27 '14 at 16:11
7

Like Amal said, it's not easy with CSS, because FontAwesome already uses :before and :after.

One possibility is to solve this with JavaScript on runtime. Try something like this:

function AppendMenuFontAwesomeIcons() {
    var elements = document.querySelectorAll('ul[id^=zz][id$=_RootAspMenu] li span.menu-item-text');

    for (var i = 0; i < elements.length; i++) {
        var icon;
        // Set the FontAwesome icon based on the text of the menu item...
        switch (elements[i].innerHTML) {
            case 'Home':
                icon = 'home';
                break;
            case 'Public documents':
                icon = 'folder-open';
                break;
            case 'Recent':
                icon = 'flash';
                break;
            case 'Sales Community':
                icon = 'comments';
                break;
        }            
        elements[i].innerHTML = '<i class="fa fa-fw fa-' + icon + '"></i> ' + elements[i].innerHTML;
    }
 }

_spBodyOnLoadFunctionNames.push('AppendMenuFontAwesomeIcons');

The method will be called when the DOM is ready.

  • I have put the code in the question, how do I use your script? – Ngeshlew Nov 27 '14 at 17:06
  • Because the method is dynamically called from SharePoint when DOM is ready, you can place it everywhere inside of a script tag, e.g. in the master page, with a content editor webpart or with a script editor webpart. The code you put in the question is only css and not code. – Fensterbank Nov 28 '14 at 7:33
  • yes, now the issue is the switch case... if you can draft just two cases, I will highly appreciate. – Ngeshlew Nov 28 '14 at 11:03
  • I added the switch-case statement to show an example – Fensterbank Dec 1 '14 at 8:57
  • I have tried to put the script as a snippet from Script Editor, but it's not working. Where else can I put it? – Ngeshlew Dec 2 '14 at 13:49
0

Just to chime in with a CSS solution, this can be done if you either:

  • add html ids to your menu items
  • or keep the order of the items fixed (or update the CSS when it changes)

If you include the Font Awesome css in your project it will define the font-family:'FontAwesome' that's used by Font Awesome internally and is just as well available for you.

You can therefore easily create icons as follows:

.some-selector:before {
    content: "\f085";
    font-family: "FontAwesome";
    font-variant: normal;
    text-transform: none;
}

Where f085 is the unicode code for the cogs icon (the code is written down on every Font Awesome icon page).
If you attach ids you can simply prepend every menu item with an icon as shown above or you can use selectors such as :nth-child(n).

0

Answer from Fensterbank should have one of:

var icon = '';

or

default:
  icon = '';
  break;

This will reset the icon var for each navigation item.

  • You can edit Fensterbank's answer to improve his code. Your edit will be reviewed by moderators and approved if it is helpful. Thank you! – MHeld Nov 21 '18 at 6:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.