Support for Font Awesome 5 icons

[UncleHobbot]

ContextMenu plugin doesn't work with the new Font Awesome 5

[bbrala]

Doesn't the webfont way work? Seems like the markup is pretty much the same.

[UncleHobbot]

They change font name. Instead of
.context-menu-icon.context-menu-icon--fa::before { ... font-family: FontAwesome; ...
now it's needed to use
.context-menu-icon.context-menu-icon--fa::before { ... font-family: 'Font Awesome 5 Free'; ...

[UncleHobbot]

Another point: icon prefixes have been changed. instead of "fa" now "far" and "fas" are used:
https://fontawesome.com/how-to-use/svg-with-js#basic-use

[bbrala]

Ok, thanks for pointing this out. This will require some changes to get working.

[RyanReedUSE]

@UncleHobbot I needed to update these quickly to FA 5 Light to match my site's style, so I just updated the src to fa-light and content to what's shown below. I tried to choose icons that were the closest match to what was in the Context Menu plugin originally.

Updated jquery.contextMenu.css:

@font-face {
  font-family: context-menu-icons;
  font-style: normal;
  font-weight: 400;
  src: url(font/fa-light-300.eot);
  src: url(font/fa-light-300.eot) format('embedded-opentype'),
    url(font/fa-light-300.woff2) format('woff2'), url(font/fa-light-300.woff) format('woff'),
    url(font/fa-light-300.ttf) format('truetype');
}
.context-menu-icon-add:before {
  content: '\f067';
}
.context-menu-icon-copy:before {
  content: '\f0c5';
}
.context-menu-icon-cut:before {
  content: '\f0c4';
}
.context-menu-icon-delete:before {
  content: '\f1f8';
}
.context-menu-icon-edit:before {
  content: '\f044';
}
.context-menu-icon-loading:before {
  content: '\f110';
}
.context-menu-icon-paste:before {
  content: '\f0ea';
}
.context-menu-icon-quit:before {
  content: '\f057';
}

[bbrala]

You Should be able to extract that to a seperate css file even, which might be better for you to do. You can make sure this one sticks, either by adding a class/element so it is more specific, or loading in the right order.

[bindrid]

I came up with a starting point for you to work with. I tested it with the built in icons, Font Awesome 4 and 5, both the svg version and the web font version.

FA5 fonts need to be put in their own element. If in svg script mode, the element could be consumed.
Because of this, needed to test in css if the text node is the first node or not so I added the following:

in the classNames object, I added itemText: 'context-menu-text' and used it here:

                function createNameNode(item) {
                    var $name = $('<span></span>');
                    $name.addClass(root.classNames.itemText);

that allows these classes to work:

/** take the spacer off the the context item **/
.context-menu-item{ padding-left:0;}

/** if the first node in the menu item is the text node, set left margin **/
.context-menu-item>.context-menu-text:first-child{
    margin-left:2em;
}

/** Icons that are put in child elements **/
.context-menu-item>.context-menu-icon-elem:first-child{
    width:2em;
    text-align:center;
}

Then the icon section:

   if (item.icon) {
                         
                            if ($.isFunction(item.icon)) {
                                item._icon = item.icon.call(this, this, $t, key, item);
                                $t.addClass(item._icon);
                            } else {
                                // check for font awesome 4 (leading 'fa' assumed to be left of, so only icon name is included.
                                if (typeof (item.icon) === 'string' && item.icon.substring(0, 3) === 'fa-') {
                                    item._icon = root.classNames.icon + ' ' + root.classNames.icon + '--fa fa ' + item.icon;
                                    $t.addClass(item._icon);
                                }
                                
                                // for the ability to add more complex elements as seen in fa5
                                else if (/<[a-z][\s\S]*>/i.test(item.icon)) {
                                    // Font Awesome 5 can be complex having multiple multiple elements.
                                    // this section blindly copies the elements
                                    item._icon = $(item.icon);
                                    item._icon.addClass(root.classNames.icon + "-elem");
                                    $t.prepend(item._icon);
                                }
                                    // Specifically for fa5 not in a node.  Put it in a node.
                                    // fa5 as to be put in a child node
                                else if (/fa[blrs]/.test(item.icon)) {
                                    var n = "<i class='" +root.classNames.icon + '-elem ' + root.classNames.icon  + '--fa5 ' + item.icon + "'></i>"
                                    $t.prepend(n);
                                }
                                else {
                                    item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon;
                                    $t.addClass(item._icon);
                                }
                            }
                        }

I tested it with:

            var cmenu = {
                // no icon
                'one': { 'name': 'One' },
                // built in icon
                'two': { 'name': 'Two', icon: "edit" },
                // fa4
                'three': { 'name': 'three', 'icon': 'fa-circle' },
                //fa4 as an element
                'four': { 'name': 'Four', icon: '<i class="fa fa-circle"></i>' },
                // fa5 as an element
                'five': { 'name': 'Five', 'icon': '<i class="fas fa-arrow-alt-circle-right"></i>' },
                // fa5 as an element disabled
                'fivedisabled': { 'name': 'Five Disabled', disabled: true, 'icon': '<i class="fas fa-arrow-alt-circle-right"></i>' },
                // fa5 as a string
                'six': { 'name': 'Six', 'icon': 'fas fa-arrow-alt-circle-left' },
                // fa5 layers, etc. It works but I seem to loosed control of the width of the span so the text did not line up with other menu items.
                // single <i> fa5 work find
                'seven':{'name':"seven", icon: '<div><span class="fa-stack fa-xs"><i class="fas fa-camera fa-stack-1x"></i><i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i></span></div>'},
                'sep1': '---'
            };

Hope this helps,
Scott

[dschueler]

Any update on this??? Seems dormant since JAN... I really would appreciate a FIX for this.... thanks..d

[bbrala]

I've added support font fontawesome in this branch. When using the Font Awesome 5 classes (like fas fa-beer) it creates an <i> element with the correct classes and some CSS adjustments. This change currently lives in https://github.com/swisnl/jQuery-contextMenu/tree/feature-2.x-font-awesome-5, i should function correctly, but i will have it reviewed internally.

Perhaps some of you can test if this change works for you?

[igorlovric]

Hi,

I just updated contextMenu plugin with new FontAwesome 5 support. It's working properly if you use FontAvesome with WebFonts & CSS, but if you use FontAwesome with SVG & JS, icons are not rendered properly. In this case you need additional css:

.context-menu-icon.context-menu-icon--fa5 svg { position: absolute;
left: .5em;
top: .4em;
color: #2980b9;
}
.context-menu-icon.context-menu-icon--fa5.context-menu-hover svg {
color: #fff;
}
.context-menu-icon.context-menu-icon--fa5.context-menu-disabled svg {
color: #bbb;
}`

[bbrala]

Thanks die checking it out. I'll add the proper rules for svg's also.

[bbrala]

I've pushed an update to the branch with some extra styling for the SVG's, the extra space at the top was needed for the other icons also.

[igorlovric]

Thank you for quick fix.

[bbrala]

The branch has been merged to master.