How to add an image for touch layout?

So, in on-screen keyboard, we can add an image as a button visual (Bitmap: browse). But in touch layout, there’s no such option. In several of my keyboard, it’s imperative to add zws button and another button, called Variant Selector 1 (U+FE00) as images. The current temporary solution is to spell out the button name, ZWJ (localized as STJ), and VS1 (localized as PV1). How can I change them into images?

image
picture 1: 1st row 3rd button is an image in on-screen keyboard

image
one unsucessful attempt to incorporate File:ISOIEC-9995-7-072--IEC-60417-6072-10--Symbol-for-ZWSP.svg - Wikimedia Commons. I have made the transparent png one, but doesn’t blend successfully like the first example.

image
a touch button to indicate the same function as the second picture above, but cannot incorporate image.

@Marc is there a way to add a .bmp to a key cap on touch layout?

oh, by the way, the first and second images i tried to add was png, because it had transparency. but as you can see, the transparency doesn’t always work.

You can include an image as a data url in the .css. But we don’t currently document how to do this, because we are trying to avoid people bedding this kind of thing in too far, as we’d like to improve the theming capabilities of the keyboard in future versions, and too much css in keyboards will make that hard to achieve.

But feel free to experiment :wink: