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?

`{name: "item_two", icon: "./path2")` ? Don't you mean: `{name: "item_two", icon: "./path2"}` You are also missing a closing brace... — Mr. Polywhirl, Nov 07 '14 at 11:37
@Mr.Polywhirl I am still working on applying it, in particular the part on adding the icons. — easytarget, Nov 07 '14 at 12:10
See my demo below. The "`icon`" property is a class-name, not a path. The class will define the background image. — Mr. Polywhirl, Nov 07 '14 at 12:36

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

What is precisely meant with the name of the icon? Is it sufficient to give its path? — easytarget, Nov 07 '14 at 12:11
I added a demo above. Can you accept this answer, as it satisfies your question. — Mr. Polywhirl, Nov 07 '14 at 13:14
I still do not have a minimum working example: I think the problem lies in adding the CSS file. I now use `$('head').append('');`, but it does not seem to work: there are no icons displayed. — easytarget, Nov 07 '14 at 13:17
That is a totally different question. I have already answered your question. Please see this question: [Can I load external stylesheets on request?](http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request) to answer the one you just asked. — Mr. Polywhirl, Nov 07 '14 at 13:23
Fair enough, however my example still does not work. I think adding the CSS file is not the problem. — easytarget, Nov 07 '14 at 13:25

score 3 · Answer 2 · edited Dec 29 '19 at 09:39

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.

score 1 · Answer 3 · answered Jun 06 '18 at 14:19

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>

Defining icons in the contextMenu plugin of jQuery

3 Answers3

Demo

Update