Unclear usage of font awesome icons in jquery context menu

0 votes

I am trying to use the free font-awesome in the jquery ContextMenu plugin (https://swisnl.github.io/jQuery-contextMenu/docs/font-awesome.html). However, it is not clear to me why it is working for some icons and not for others (from the free icons set):

Example in the fiddle: https://jsfiddle.net/4ey3nx9t/

I changed the icon for item entry "edit" from the sample code below to fa-solid fa-magnifying-glass as suggested by fontawesome. However, this one doesn't work.

I changed the icon for item entry "cut" to fa-solid fa-stethoscope and it worked fine.

Please note that I added fas to the icon, as otherwise the font would be bold. I don't know why that is.

Any clue as to why this is? How can I use all the free font-awesome icons?

        items: {
            "edit": {name: "Edit", icon: "fas fa-solid fa-magnifying-glass"},
            "cut": {name: "Cut", icon: "fas fa-solid fa-stethoscope"},
           copy: {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return "context-menu-icon context-menu-icon-quit";
            

enter image description here

Jun 16 in JQuery by gaurav
• 17,760 points
28 views

1 answer to this question.

0 votes
<script type="text/javascript">
    jQuery(function ($) {
        $("#contextMenu").ejMenu({
      menuType: ej.MenuType.ContextMenu,
      openOnClick: false,
      contextMenuTarget: "#target"
  });
    });
</script>

Font Awesome is a font and icon toolkit based on CSS and LESS. You can use the font awesome icons in to your sample by referring the font awesome library in header section.

answered Jun 17 by rajatha
• 7,040 points

Related Questions In JQuery

0 votes
1 answer

What is the equivalent of jQuery .hide() to set visibility: hidden

Hello Kartik, There isn't one built in but ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
6,207 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
25,630 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,881 views
0 votes
1 answer

How to set cache false for getJSON in jQuery?

Hello @kartik, Your code just needs a trigger ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
276 views
0 votes
0 answers

jQuery add class .active on menu

I've got a problem. I want to add ...READ MORE

Jun 10 in JQuery by gaurav
• 17,760 points
25 views
0 votes
1 answer

How can I keep my sub-menu open in jQuery hover menu?

keeping sub menu open on hover and ...READ MORE

answered Aug 2 in Web Development by rajatha
• 7,040 points
23 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
603 views
0 votes
1 answer

What is the meaning of symbol $ in jQuery?

$ sign is just a valid javascript identifier ...READ MORE

answered Jun 15 in JQuery by rajatha
• 7,040 points
25 views
0 votes
1 answer

difference between $ and $() in jQuery

JavaScript: It is a major scripting programming language ...READ MORE

answered Jun 10 in JQuery by rajatha
• 7,040 points
19 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP