35

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)?

2
  • 4
    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 Mod
    Dec 19, 2012 at 16:26
  • 6
    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, 2012 at 21:05

2 Answers 2

52

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]: https://i.stack.imgur.com/Rfuw7.png
[newwinlogo]: https://i.stack.imgur.com/B8Zit.png
[oldwinlogo]: https://i.stack.imgur.com/T0oPO.png
6
  • Err, "I like the old one much better" refers to me, not Sathya (although of course he may share my views!)
    – Karan
    Dec 21, 2012 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, 2012 at 17:49
  • 1
    @Karan indeed, I do!
    – Sathyajith Bhat Mod
    Dec 22, 2012 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, 2012 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, 2013 at 14:52
  • 1
    Can someone please cleanup the excess white on [newwinlogo]
    – user345866
    Oct 20, 2016 at 19:25
12

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.

3
  • 2
    I call it the super key to be linux friendly.
    – Rob
    Dec 19, 2012 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, 2012 at 21:04
  • @DaveRook well Windows key don't have a string but you still call it Windows/Win key. ;)
    – avirk
    Dec 20, 2012 at 9:36

You must log in to answer this question.

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