Emojis in WordPress on Mac to creating keyboard key images in CSS

In a recent post I wanted to add a smiley to a blog post and thought I could simply type 🙂 but this didn’t work. According to a search on the internet this should work in some cases but not for me as you can see. Searching a bit more I found other suggestions. One way is to create the desired emoji on a dedicated website and then copy-paste it but that is a cumbersome roundabout way. Luckily it can be done a lot simpler by pressing the command + control + space keys together. This will show a pop up from which you can select the desired emoji. On Windows you can do the same by pressing the Windows key + . keys together. I have not tried this myself.

Now looking at the paragraph above the instructions don’t look perfectly clear and the obvious way to improve this would be to use images of the keys to press. The next question is then where to get images of keyboard keys and you can probably go and hunt on some website with stock images hoping they are free. But my personal experience with finding satisfactory free stock images has not been great so far. Instead I am going to try and create keyboard key images using CSS. I found some hints on Medium and will give it a go to see if I can tweak it to my own liking.