Font Awesome not supported

[rootuser]

Hello,

I recently needed a context menu for one of my projects and stumbled upon your plugin. I do like it very much; it is just what I needed.

There was one major drawback though: it did not support font awesome. (Actually, I don't understand why you create your own font for the icons. I would be glad to learn the reason for this.)

In the meantime, I created a quick fix to support font awesome, and I am about to share it right here :)

First, we need some additions to the jquery.contextMenu.css file:
Just add

.cmi-fa {
    display: block; !important;
    line-height: 20px; !important;
}

.cmi-fa:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 28px;
    font-family: FontAwesome;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #2980b9;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cmi-fa span {
    font-family: sans-serif;
}

.cmi-fa.context-menu-hover:before {
    color: #fff;
}

Then, in jquery.contextMenu.js, find the following code block:

if (item.icon) {
    if ($.isFunction(item.icon)) {
        item._icon = item.icon.call(this, this, $t, key, item);
    } else {
        item._icon = root.classNames.icon + '-' + item.icon;
    }
    $t.addClass(item._icon);
}

In release 2.0.1, you will find it beginning at line 1199. Change the else clause:

if (item.icon) {
    if ($.isFunction(item.icon)) {
        item._icon = item.icon.call(this, this, $t, key, item);
    } else {
        if ( item.icon.substring(0,3) == 'fa-' ) {
            // to enable font awesome
            item._icon = 'cmi-fa fa ' + item.icon;
        } else {
            item._icon = root.classNames.icon + '-' + item.icon;
        }
    }
    $t.addClass(item._icon);
}    

This will assign the CSS classes above to the menu items with icon names beginning with 'fa-'. And that is all we need to do here.

The usage is very simple:
Firstly, you must of course reference Font Awesome in your HMTL file. Like this for example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

In your Javascript $contextMenu() call, you can now simply use Font Awesome icon names in the items block, like 'fa-arrow-right' or ' fa-cut'. Example:

...
items: {
    "edit": {name: "Edit", icon: "fa-edit"},
    "delete": {name: "Delete", icon: "fa-trash"},
    "quit": {...}
}
...

Have fun!

[bbrala]

Thanks for this, i'll have a look how we can integrate this.

The reasoning using a custom font was mostly to enable users to use their owns icons easily. When we do development we usually need custom icons and this way by including the sass in your application you can add custom icons without a problem. I do understand that some people prefer just to use the font-awesome set and go from there.

Just need to look how to clean up the CSS. Also think i need to reintroduce the contextmenu-icon class so it is easier to overwrite some of the properties. There is quite a lot of reductant CSS here that would be removed by that class. I think this can be included quite easily.

So basically something like:

if (item.icon) {
    if ($.isFunction(item.icon)) {
        item._icon = item.icon.call(this, this, $t, key, item);
    } else {
        if ( typeof(item.icon) === 'string' && item.icon.substring(0,3) == 'fa-' ) {
            // to enable font awesome
            item._icon = root.classNames.icon + ' ' + root.classNames.icon + '--fa fa ' + item.icon;
        } else {
            item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon;
        }
    }
    $t.addClass(item._icon);
}    

If the CSS that is currently in the list of icons is moved to context-menu-icon then the CSS should become something like:

.contextmenu-icon--fa {
    font-family: FontAwesome;
}
.contextmenu-icon--fa span {
    font-family: sans-serif;
}

I see a display:block !important; i hope that isn't needed, i hate !important :)

Anyways, thanks for this. I'll look into it some more soon.

[zendre4]

+1

[frankhommers]

+1

[frankhommers]

For the others trying to use font-awesome icon's, this is a little CSS trick that works for me.

Unfortunately, you have to look up the content for e.g. bluetooth in the font-awesome.css.

.context-menu-icon-bluetooth:before {
    font-family: FontAwesome !important;
    content: "\f293";
}

[praine]

Thanks for this fix, rootuser, it works great!

[nelson6e65]

Oh, nice @frankhommers I just did the same in #392 . Hahaha... I could save some minutes if I checked this before. 😅