This code is used to add Font Awesome fonts to dynamically generated navigation links based on a link-to-icon map. To use this code, make sure you have a reference to Font Awesome (http://fontawesome.io) and jQuery.

link-to-icon-mapper.js

"use strict";

/************************************************************************************************
* Navbar Icons
* 
*  To make this work, you will need navigation links that use classes that match what you send
*  to the calls above.
* 
*  Example:
* 
*  <ul class="nav navbar-nav">
*     <li class="nav-home" role="presentation"><a href="/">Home</a></li>
*     <li class="nav-about" role="presentation"><a href="/about">Home</a></li>
*     <li class="nav-my-private-key" role="presentation"><a href="/my-private-key">Home</a></li>
*  </ul>
* 
* Here is sample code to map the above menu to its icons (the following code should be after this script file):
* 
*  window.linkIconMap.defaultIconSize = 'fa-lg';
*  window.addLinkIcon('nav-home', 'fa-home');
*  window.addLinkIcon('nav-about', 'fa-user');
*  window.addLinkIcon('nav-my-public-key', 'fa-key', 'fa-3x'); // size is optional
*  window.addLinkIcon('nav-test', 'fa-cogs');
* 
*  Note: for size, the following values are valid:
*  
*  '' (will use default fontawesome size), 
*  'fa-lg'
*  'fa-2x'
*  'fa-3x'
*  'fa-4x'
*  'fa-5x'
* 
*  If you do not supply a size for your icon, then the theme will use the default size 
*  as determined by the defaultNavbarIconSize variable
* 
*  You can find a list of icons to use at http://fontawesome.io
* 
************************************************************************************************/
window.linkIconMap = {};
window.addLinkIcon = function (target, icon, size) {
    // check to see if we have maps defined already
    if (!window.linkIconMap.maps) {
        // if not, define it
        window.linkIconMap.maps = [];
    }

    // if we have a size passed in, use it, otherwise use the default icon size on our icon map. If that's missing, use nothing (Font Awesome default size)
    var iconSize = size ? size : 'defaultIconSize' in window.linkIconMap ? window.linkIconMap.defaultIconSize : '';
    window.linkIconMap.maps.push({ "target": target, "icon": icon, "size": iconSize });
};

var curIconMap;
var curSize;
/***********************************************************************************************/

function bindLinkIcons() {
    if (window.linkIconMap.maps) {
        for (var i = 0; i < window.linkIconMap.maps.length; i++) {
            // get a handle on the current icon map
            curIconMap = linkIconMap.maps[i];

            // set the icon on the navbar item
            createIcon(curIconMap.target, curIconMap.icon, curIconMap.size);
        }
    } else {
        console.warn('cerkit-bootstrap theme supports navbar link icons. Add the following to your header in code injection: \<script\>window.addLinkIcon(/* target = */ "nav-home", /* icon = */ "fa-home", /* (optional) size = */ "fa-3x");\</script\>');
    }
}

function createIcon(target, icon, size) {
    var iconElement = $(document.createElement('i')).attr('class', 'link-icon fa fa-fw ' + icon + ' ' + size); // use the link-icon class to add a right-margin
    var targetNavbarItem = $('.' + target);
    var targetItemFirstChild = $(targetNavbarItem).children()[0];

    // figure out if the nav item has any links in it. If so, use that as the icon parent.
    // Otherwise, use the navbarIconItem.
    var iconParentElement = targetItemFirstChild == null ? targetNavbarItem : targetItemFirstChild;

    // insert the icon element at the beginning of the parent
    $(iconParentElement).prepend(iconElement);
}

$(bindLinkIcons);