swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.25k stars 744 forks source link

Can't get Font Awesome icons working #761

Open notchriss opened 2 years ago

notchriss commented 2 years ago

I've tried adding them like this: icon: 'fa-trash', icon: 'fa fa-trash' or even icon: 'trash'. In the last case I dont see anything like I'm supposed to, but if I prepend it with fa- or fa fa- I can see some sort of squares or other symbols depending on what icon I attempt to add and what browser I use (Firefox in the screenshot), instead of the appropriate icon.

Also the text inexplicably becomes bold (as in well, "bold" in the screenshot) if it's added like this: icon: 'fa-trash'. It does not if it's like this: icon: 'fa fa-trash' (at "italic" in the screenshot).

Font awesome is included and the same icon i.e. trash in this case is successfully rendered elsewhere on the very same page but not in the context menu.

            'bold': {
                name: 'Bold (CTRL+B)',
                icon: 'fa-trash',
                isHtmlName: false,
                callback: function(itemKey, opt, e){
                    document.execCommand('bold', false, null);
                }
            },

Screenshot_1

JoewAlabel commented 1 year ago

I add the Font Awesome: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

And i add the option on menu: "save": {name: "Save Markers", icon: "fa-file-export"},

But the name becomes bold. Any way to fix it, please?

Ty!!!!!

JoewAlabel commented 1 year ago

I add the Font Awesome: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

And i add the option on menu: "save": {name: "Save Markers", icon: "fa-file-export"},

But the name becomes bold. Any way to fix it, please?

Ty!!!!!

It worked if i place before the fa-icon-name this text: fa-regular

jejecrunch commented 9 months ago

I add the Font Awesome: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> And i add the option on menu: "save": {name: "Save Markers", icon: "fa-file-export"}, But the name becomes bold. Any way to fix it, please? Ty!!!!!

It worked if i place before the fa-icon-name this text: fa-regular

Thank you for answer ...

I had the same problem. I solved it like this.

"print": {
      name: "print", icon: "fa-regular fa-print", callback: function (key, options) {
          console.log(options)
      }
  },

Hope this helps!

bilalshaikh292 commented 9 months ago

heyy is the issue still open ? I would like to contribute ?

harshul-2002 commented 9 months ago

hey , is thisissue still open i want to contribute in this issue