Use fontawesome icons

[Sch-Tim]

How can I use Font Awesome icons as keyboard keys?
I tried the unicode but without success. If I do so it doesn't show anything.

[Mottie]

Hi @Akhanto!

Check out this demo:

CSS

.ui-widget .ui-keyboard-bat,
.ui-widget .ui-keyboard-cat,
.ui-widget .ui-keyboard-ghost {
  /* override jquery ui font setting */
  font-family: "Font Awesome 5 Pro";
}
.ui-keyboard-bat span,
.ui-keyboard-cat span,
.ui-keyboard-ghost span {
  display: none;
}
.ui-keyboard-bat:before {
  content: '\f6b5';
}
.ui-keyboard-cat:before {
  content: '\f6be';
}
.ui-keyboard-ghost:before {
  content: '\f6e2';
}

JS

$(function() {
  $("#keyboard").keyboard({
    css: {
      buttonDefault: "fas"
    },
    layout: "custom",
    customLayout: {
      default: ["bat cat ghost", "{accept} {cancel}"]
    }
  });
});

Including the buttonDefault: 'fas' is optional. If included, the icons will appear solid and outlined when hovered. Without it the icons are outlined. I didn't test all icons, just reporting what I see with the 3 in the demo.

[Sch-Tim]

Great, thank you!
Unfortunately I don't own a pro license so I had to use Free instead of Pro and fas (or manually adding font-weight: 900) is not optional.
Do you have an idea how I could realize stacking?

[Mottie]

Oh, I forgot to mention that you can also include HTML in the display option; but it only works for action keys (I'll probably need to fix this) - demo:

$(function() {
  // This is entered when the user pressed the {spider} key
  $.keyboard.keyaction.spider = "x";

  $("#keyboard").keyboard({
    css: {
      buttonDefault: "fas"
    },
    layout: "custom",
    customLayout: {
      default: ["bat cat ghost {spider}", "{accept} {cancel}"]
    },
    display: {
      spider: '<i class="fas fa-spider"></i>'
    }
  });
});

[Sch-Tim]

Ha, perfect! In my case I only need it for action keys so it's no problem.

[Sch-Tim]

Your example works great but when I try to realize stacked icons the script crashes.
'<span class="fa-stack fa-2x"><i class="fas fa-hourglass fa-stack-1x"></i><i class="fas fa-ban fa-stack-2x" style="color: tomato;"></i></span>'

[Mottie]

When a colon (:) is included in the display option, it is mistaking it for a tooltip label. Try this instead (demo):

'<span class="fa-stack fa-2x"><i class="fas fa-hourglass fa-stack-1x"></i><i class="fas fa-ban fa-stack-2x"></i></span>'

.ui-keyboard-button .fa-ban {
  color: tomato;
}

[Sch-Tim]

Thank you, that makes sense