I know we can use <kbd> to make keyboard short cuts like this ! For example, if I wanted to explain how to open the Run prompt on Windows, which is the Windows key and R, how would this be done? (And for clarity, I mean the Windows key which is typically between ctrl and alt)?

  • 3
    If typing ctrl and alt isn't a problem, why is Win or Windows? It's not printed on the key, but just as clear. How about shift or tab? backspace? return? left arrow? – Daniel Beck Dec 19 '12 at 16:26
  • 5
    Because typing a key with Ctrl exists on my keyboard... But a key with win doesn't. Why else would I ask? :) please don't read my comment as rude, it is not meant to be :) – Dave Dec 19 '12 at 21:05
up vote 44 down vote accepted

Joey has this trick of embedding the Windows logo image within the kbd tags. So

<kbd>![Windows Key][winlogo]</kbd>

Combined with a regular key, looks like:

Windows KeyR

Here's a better one that shows the 4 parts clearly:

Windows KeyR <kbd>![Windows Key][newwinlogo]</kbd>

Although FWIW I like the old one much better:

Windows KeyR <kbd>![Windows Key][oldwinlogo]</kbd>

Here are the images you have to use in your post's source code:

[winlogo]: http://i.stack.imgur.com/Rfuw7.png
[newwinlogo]: http://i.stack.imgur.com/B8Zit.png
[oldwinlogo]: http://i.stack.imgur.com/T0oPO.png
  • Err, "I like the old one much better" refers to me, not Sathya (although of course he may share my views!) – Karan Dec 21 '12 at 3:41
  • 2
    The only issue with the huge icon is that you can't really use it in a paragraph (because it'll increase the line height) or with other keys because it's too large. – slhck Dec 21 '12 at 17:49
  • 1
    @Karan indeed, I do! – Sathya Dec 22 '12 at 6:13
  • @slhck: 16x16 vs 12x12, so I guess it might be possible to shrink it without losing too much detail (then again, maybe it'll end up looking just like the one Joey uses). – Karan Dec 23 '12 at 6:57
  • 1
    Hmmm, not too nice on mobile (or at least on some devices), nor for the few who have Imgur blocked at work. – Arjan May 19 '13 at 14:52
  • 1
    Can someone please cleanup the excess white on [newwinlogo] – user345866 Oct 20 '16 at 19:25

Well, you could use a symbol that closely resembles a window, which is SQUARED PLUS, or Unicode: U+229E. It looks like this:

If it doesn't look like the Windows logo to you, you can also simply use ⊞ Win, Win, Windows or Windows-Key. The benefit here is that everyone will know what you mean.

  • 2
    I call it the super key to be linux friendly. – Rob Dec 19 '12 at 19:58
  • Thanks. I had no problem typing windows but no key actually has the string "windows" and I was just curious. There isn't a key, but we don't care! :) – Dave Dec 19 '12 at 21:04
  • @DaveRook well Windows key don't have a string but you still call it Windows/Win key. ;) – avirk Dec 20 '12 at 9:36
  • 1
    didn't someone do this cool thing where they embedded an image of the windows key in keyboard tags? – Journeyman Geek Dec 20 '12 at 11:54
  • @JourneymanGeek yeah, just posted an answer – Sathya Dec 20 '12 at 15:59

I never liked that the images of the other solution created keys that were larger than keys with normal letters in them. So here's my alternative:

Win http://salzburg.so/~oliver/win8.svg+I

I'm using an SVG here, for most optimal results: http://salzburg.so/~oliver/win8.svg

  • Thank you for this great suggestion, sadly though with the latest updates at SU, SVG files appear to be no longer supported! – Dave Apr 4 '13 at 9:13
  • @DaveRook: Still seems to work fine for me. Where did you notice problems? – Der Hochstapler Apr 4 '13 at 12:02
  • When adding it to a new post via the Image button (I guess you can get round the problem if you type it manually maybe). Existing instances appear to continue to work – Dave Apr 4 '13 at 12:10
  • @DaveRook: Oh, yeah, I understand now. You're not supposed to upload it again, but use the existing URL. Which, I guess, is not the best option because I'm hosting it :\ – Der Hochstapler Apr 4 '13 at 12:20
  • Keep it hosted man, forever! :) he he. Actually, it's OK, I can just save the .png to my machine and upload it, thereby the SU site takes a copy of the file! – Dave Apr 4 '13 at 12:35
  • 1
    @DaveRook: Maybe we should just make an image of the whole key and use that, instead of trying to put an image inside the <kbd>... – Der Hochstapler Apr 4 '13 at 12:43
  • No matter how hard you try, there's always something failing... – Arjan May 19 '13 at 14:46
  • @Arjan: Damn! :D Having the whole key as an image doesn't work out either, because the image isn't aligned with other text :P – Der Hochstapler May 19 '13 at 16:55
  • @OliverSalzburg, the link is dead. – belford Oct 31 '15 at 2:40
  • @belford: Sorry, I had to move content around a bit. It's probably not a great solution to rely on me hosting this image ;P – Der Hochstapler Nov 2 '15 at 8:08
  • @OliverSalzburg, I don't mind :P. – belford Nov 2 '15 at 8:48
  • Could you please upload that image with HTTPS? It's not working otherwise, since Stack Exchange doesn't support HTTP images. I've uploaded it as a PNG image to Imgur at i.stack.imgur.com/iAuWK.png, but it would be helpful if you uploaded it as SVG. – Donald Duck Mar 23 '17 at 13:04
  • Sorry, I have no appropriate host available at this time. – Der Hochstapler Mar 23 '17 at 14:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .