18

I just saw this answer and was kicking myself for not thinking of this first, but I think it's a fantastic idea to use images for keyboard keys and console buttons. Can we get or does there already exist a web resource that has buttons for all the various buttons for game controllers and keyboard keys?

I think if we started using these types of images across the board when discussing button combos it would really make the website look great.

26

combining the <kbd> tag with unicode and html entities can give some great results.

Directional arrows:

  • <kbd>&uarr;</kbd>

  • <kbd>&darr;</kbd>

  • <kbd>&larr;</kbd>

  • <kbd>&rarr;</kbd>

Basic Buttons + Analog stick:

  • &#x24B6;
  • &#x24B7;
  • &#x24B8;
  • &#x24C1;
  • &#x24C4;
  • &#x24C7;
  • &#x24CA;
  • &#x24CD;
  • &#x24CE;
  • &#x24CF;
  • &#x24D0;
  • &#x24D1;
  • &#x24D2;
  • &#x24E7;
  • &#x24E8;
  • &#x24E9;
  • &#x25B3;
  • &#x25CB;
  • &#x2715;
  • &#x25A1;
  • &#x2460;
  • &#x2461;
  • &#x25C9;

Shoulder + Other Buttons

  • L <kbd>L</kbd>

  • R <kbd>R</kbd>

  • L1 <kbd>L1</kbd>

  • L2 <kbd>L2</kbd>

  • R1 <kbd>R1</kbd>

  • R2 <kbd>R2</kbd>

  • + <kbd>+</kbd>

  • - <kbd>-</kbd>

  • home <kbd>home</kbd>

  • options <kbd>options</kbd>

  • select <kbd>select</kbd>

  • share <kbd>share</kbd>

  • start <kbd>start</kbd>

So remember: ⒷⒶstart

2
  • With Ouya out now, needs a U
    – Batophobia
    Jun 28 '13 at 21:20
  • added both the Capital O & U for OUYA and the options & share for PS4 Jul 4 '13 at 21:02
12

You can already do this using the <kbd> HTML tag, like so..

A B X

<kbd>A</kbd> <kbd>B</kbd> <kbd>X</kbd>

and, you can use HTML entities for up down and so forth.

<kbd>&uarr;</kbd> <kbd>&darr;</kbd> <kbd>&larr;</kbd> <kbd>&rarr;</kbd>

List of HTML entities:
http://www.zytrax.com/tech/web/entities.html

8
  • Sweet, that takes care of the keyboard and directional buttons/d-pads. Now we just need console specific images.
    – cowgod
    Jul 11 '10 at 3:19
  • @cowgod You could get away with some combination of this and unicode (○, △, ◻), though they aren't coloured. They do work with <kbd> elements, though.
    – Grace Note StaffMod
    Jul 11 '10 at 12:57
  • 2
    @cowgod Not sure about it, but Playstation button images are registered by Sony. Maybe is better to avoid images and use only characters.
    – user59
    Jul 11 '10 at 14:23
  • I was wondering how people made the button-esque characters.
    – Kevin Yap
    Jul 11 '10 at 15:58
  • 2
    There should be shorthand syntax for this; who wants to memorize entities for arrows and shapes?
    – Corey
    Jul 11 '10 at 17:15
  • There's another issue with this answer: Those of us reading on Macs (or at least in Firefox on a Mac) may be unable to see three of those arrows -- up, down and left. Only right arrow is rendering for me.
    – John Rudy
    Jul 12 '10 at 3:57
  • I see everything in Safari 4 and 5 for Mac.
    – Kevin Yap
    Jul 12 '10 at 18:32
  • @Corey -- just map them into your keyboard layout!
    – badp
    Jul 16 '10 at 0:14
8

Symbols for your copy pasting needs:

̲↓

Don't go too overboard with these, however, as they may not display correctly everywhere.

0
4

I think that's a great idea. For now:

D-pad: < > v ^

Buttons: A B X Y C Z + - home 1 2 start select [insert shape name]

Triggers: -L- -R- -L1- -L2- -R1- -R2-

Analog Sticks: (o) (L) (R)

< kbd > text < /kbd > for the buttons-like appearance.

Edit: There are many ways to display these, but there should be a non-technical user friendly way to input them.

5
  • 1
    It would be nice if we could get console specific images too, such as the triangle, square, etc. for the Playstation, and X, Y, B and A for the XBox. Not putting that on you, just saying. This is a great start!
    – cowgod
    Jul 11 '10 at 3:17
  • Why wouldn't <kbd>X</kbd> <kbd>Y</kbd> etc work?
    – user56
    Jul 13 '10 at 21:43
  • They do work; I was unaware of that HTML at the time of writing this answer. I'll go and edit.
    – Kevin Yap
    Jul 14 '10 at 0:11
  • We should not use those for the D-pad. Use &uarr; ↑, &darr; ↓, &larr; ←, and &rarr; →.
    – CyberSkull
    Oct 31 '11 at 3:33
  • @CyberSkull Agreed – I wasn't that Unicode-savy back when I wrote this answer. :)
    – Kevin Yap
    Oct 31 '11 at 3:41
2

I've said this before elsewhere, but we really need a symbol palette. It would greatly simplify typing in something like the [Select]Start Konami Code, for example.

2

No one asked but:

Mouse Buttons:

This is copied from this answer posted by user Gandalf3 on Blender Meta.

I added buttons for the Mouse Wheel up and down scroll motions (also from the (old) Blender Wiki, but with the MWD icon slightly changed for improved visibility and consistency):

Icon (<kbd>![image]</kbd>) Image link
MWU MWU https://i.stack.imgur.com/7Vtba.png
MWD MWD https://i.stack.imgur.com/doOIR.png

I'd also suggest installing the script linked there (and here) as it makes creating <kbd> notations a lot easier (although, bound to Ctrl+Y, it interferes with the 'Undo' functionality of Markdown, but the script can easily be edited in Tampermonkey, and I bound it to Ctrl+E).
I have quickly forked it here, with the added support for Mouse Wheel up and down movements (and some extra changes).

You must log in to answer this question.

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