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, 2022 in JQuery by gaurav
• 23,260 points
904 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, 2022 by rajatha
• 7,680 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,840 points
15,108 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,840 points
43,843 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,840 points
15,712 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,840 points
988 views
0 votes
0 answers

jQuery add class .active on menu

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

Jun 10, 2022 in JQuery by gaurav
• 23,260 points
692 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, 2022 in Web Development by rajatha
• 7,680 points
3,603 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
747 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
1,270 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, 2022 in JQuery by rajatha
• 7,680 points
3,494 views
0 votes
1 answer

difference between $ and $() in jQuery

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

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