Adding Font Awesome Icons to Quick Launch Links

Question

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?

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*/}

Answer 1

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.

Answer 2

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).

Answer 3

Answer from Fensterbank should have one of:

var icon = '';

or

default:
  icon = '';
  break;

This will reset the icon var for each navigation item.