Defining icons in the contextMenu plugin of jQuery

Question

So far, I was able to create a contextMenu that binds to a right mouse cilck by including the javascript in a html file:

var Feature = {
    register_contextMenu: function() {
        $.contextMenu({
            selector: '*',
            items: {
                "item_one": { name: "Item_one", icon: "./path1" },
                "item_two": { name: "item_two", icon: "./path2" }
            }
        });
    }
};

$(document).ready(Feature.register_contextMenu);

How would one go about displaying icons alongside the options?

The documentation of the plugin(http://medialize.github.io/jQuery-contextMenu/) mentions that one has to define icons in CSS with certain selectors.

How does one use CSS with contextMenu in this case?

Answer 1

Did you check out the source code for the demo on Github?

Looks like you just add a CSS class:

.context-menu-item.icon-<NAME-OF-ICON> {
    background-image: url(images/<NAME-OF-ICON>.png);
}

The docs also state:

(string) icon
Specifies the icon class to set for the item.

Icons must be defined in CSS with selectors like .context-menu-item.icon-edit, where edit is the icon class.

The create() function is responsible for attaching the class for the icons to the items. This code appears on line 1077 of the current source code.

// add icons
if (item.icon) {
     $t.addClass("icon icon-" + item.icon);
}

From the demo:

/* icons
    #protip:
    In case you want to use sprites for icons (which I would suggest you do) have a look at
    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
    .context-menu-item.icon:before {}
 */
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }

---

Demo

I removed the "edit", "delete", and "add" menu-items from the example and added a "Share on Google+", "Share on Facebook", and "Save" option to the menu.

Just press "Run code snippet" below to see it in action.

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "google-plus" },
      "facebook" : { name: "Share on Facebook", icon: "facebook" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "save" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

.context-menu-icon {
  min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px;
}

.context-menu-icon-save {
  /* Source: http://www.famfamfam.com/lab/icons/silk/icons/disk.png */
  background-image: url("http://i.imgur.com/4LyeGi1.png");
}

.context-menu-icon-facebook {
  /* Source: http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png */
  background-image: url("http://i.imgur.com/EVcCwyZ.png");
}

.context-menu-icon-google-plus {
  /* Source: https://cdn1.iconfinder.com/data/icons/professional-toolbar-icons-2/16/Google_plus_google.png */
  background-image: url("http://i.imgur.com/Zg0UFmq.png");
}

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

---

Update

I suggest that you use a font icon library such as FontAwesome. This is the easiest solution.

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var msg = "clicked: " + key;
      window.console && console.log(msg) || alert(msg); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "google-plus" },
      "facebook" : { name: "Share on Facebook", icon: "facebook" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "save" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

.context-menu-icon.context-menu-icon-save:before,
.context-menu-icon.context-menu-icon-facebook:before,
.context-menu-icon.context-menu-icon-google-plus:before {
  font-family: FontAwesome !important;
}

.context-menu-icon.context-menu-icon-save:before {
  content: "\f0c7"; /* fa-floppy-o */
}

.context-menu-icon.context-menu-icon-facebook:before {
  content: "\f230"; /* fa-facebook-official */
}

.context-menu-icon.context-menu-icon-google-plus:before {
  content: "\f0d4"; /* fa-google-plus-square */
}

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

It looks like FontAwesome is supported with this plugin, so you do not need to customize any CSS.

$(function(){
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var msg = "clicked: " + key;
      window.console && console.log(msg) || alert(msg); 
    },
    items: {
      "cut"      : { name: "Cut",               icon: "cut" },
      "copy"     : { name: "Copy",              icon: "copy" },
      "paste"    : { name: "Paste",             icon: "paste" },
      "sep1"     : "---------",
      "google"   : { name: "Share on Google+",  icon: "fa-google-plus-square" },
      "facebook" : { name: "Share on Facebook", icon: "fa-facebook-official" },
      "sep2"     : "---------",
      "save"     : { name: "Save",              icon: "fa-floppy-o" },
      "quit"     : { name: "Quit",              icon: "quit" }
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>

<div class="context-menu-one box menu-1">
  <strong>Right-Click ME!</strong>
</div>

Answer 2

It has been a while since you asked for help... Anyway, try to adapt the following code (It just sums up Mr. Polywhirl's answer into a single file for easier understanding). As you can see, the menu's first three items contain custom icons, while the last one uses one of the built-in .svg pictures.

If you use external resources as I do in this example, make sure that you are able to access them (Open Chrome's Dev-Tools by pressing Strg + I and watch out for error messages in the console) and as always make sure that you are allowed to use them.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <!-- include the context-menu from cdnjs -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.css" />
  <style>
    .context-menu-abc {
      border: 1px solid gray;
      padding: 5px;
    }
    /* used for all items */
    
    .context-menu-item {
      min-height: 18px;
      background-repeat: no-repeat;
      background-position: 4px 4px;
    }
    /* all custom icons */
    
    .context-menu-item.context-menu-icon-firstOpt {
      background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png");
    }
    
    .context-menu-item.context-menu-icon-secondOpt {
      background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Save.png");
    }
    
    .context-menu-item.context-menu-icon-thirdOpt {
      background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png");
    }
  </style>
</head>

<body>
  <div><span class="context-menu-abc">right-click this box</span></div>

  <!-- try to include scripts at the end so the DOM can be created faster -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.js"></script>

  <script>
    $(function() {
      "use strict";
      $.contextMenu({
        selector: '.context-menu-abc',
        callback: function(key, options) {
          if (key === 'firstOpt') {
            // specific code for your first option
          } else if (key === 'secondOpt') {
            // specific code for your second option
          } else if (key === 'thirdOpt') {
            // specific code for your third option
          }
        },
        items: {
          'firstOpt': {
            name: "First option",
            icon: "firstOpt"
          },
          'secondOpt': {
            name: "Second choice",
            icon: "secondOpt"
          },
          'thirdOpt': {
            name: "Third option",
            icon: "thirdOpt"
          },
          'copy': {
            name: "Fourth option",
            icon: "copy"
          }
        }
      });
    });
  </script>
</body>

</html>

Hope that helped.

Answer 3

Using the Mr PolyWhirls example above I still couldn't get it to work properly. The FontAwesome icon was not aliging properly etc. I imagine that there has been an update to the plugin somewhere along the way that has broken support for FA 4. (There were changes to FA 4 when FA 5 came out). My solution was to go back to using custom CSS...

<style type="text/css">
    .context-menu-icon.context-menu-icon-file-alt:before {
        font-family: FontAwesome !important;
        color: #2980B9;
          font-style: normal;
          font-weight: normal;
          font-size: 16px;
          left: 0;
          line-height: 1;
          position: absolute;
          text-align: center;
          top: 50%;
          transform: translateY(-50%);
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          width: 28px;

    }
    .context-menu-icon.context-menu-icon-file-alt:before{
        content: '\f15c';
    }
</style>