Defining icons in the contextMenu plugin of jQuery

javascript jquery web contextmenu

13,082

Solution 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>

Solution 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.

Solution 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>

13,082

Author by

Mussé Redi

Updated on June 04, 2022

Comments

Mussé Redi almost 2 years
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?
Mussé Redi over 9 years

What is precisely meant with the name of the icon? Is it sufficient to give its path?
Mussé Redi over 9 years

The same for item.icon: where do we define item.icon?
Mussé Redi over 9 years

Could you elaborate on adding part of the icons?
Mr. Polywhirl over 9 years

I added a demo above. Can you accept this answer, as it satisfies your question.
Mussé Redi over 9 years

I still do not have a minimum working example: I think the problem lies in adding the CSS file. I now use $('head').append('<link rel="stylesheet" href="cssfile.css" type="text/css" />');, but it does not seem to work: there are no icons displayed.
Mr. Polywhirl over 9 years

That is a totally different question. I have already answered your question. Please see this question: Can I load external stylesheets on request? to answer the one you just asked.
Mussé Redi over 9 years

Fair enough, however my example still does not work. I think adding the CSS file is not the problem.