Can't get Font Awesome icons working

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);
                }
            },

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

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

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!

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

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