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.

6 Answers 6

Reset to default
27

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
    Commented Jun 28, 2013 at 21:20
  • added both the Capital O & U for OUYA and the options & share for PS4
    – alexanderpas
    Commented Jul 4, 2013 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
    Commented Jul 11, 2010 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
    Commented Jul 11, 2010 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
    Commented Jul 11, 2010 at 14:23
  • I was wondering how people made the button-esque characters.
    – Kevin Yap
    Commented Jul 11, 2010 at 15:58
  • 2
    There should be shorthand syntax for this; who wants to memorize entities for arrows and shapes?
    – Corey
    Commented Jul 11, 2010 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
    Commented Jul 12, 2010 at 3:57
  • I see everything in Safari 4 and 5 for Mac.
    – Kevin Yap
    Commented Jul 12, 2010 at 18:32
  • @Corey -- just map them into your keyboard layout!
    – badp
    Commented Jul 16, 2010 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
    Commented Jul 11, 2010 at 3:17
  • Why wouldn't <kbd>X</kbd> <kbd>Y</kbd> etc work?
    – user56
    Commented Jul 13, 2010 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
    Commented Jul 14, 2010 at 0:11
  • We should not use those for the D-pad. Use &uarr; ↑, &darr; ↓, &larr; ←, and &rarr; →.
    – CyberSkull
    Commented Oct 31, 2011 at 3:33
  • @CyberSkull Agreed – I wasn't that Unicode-savy back when I wrote this answer. :)
    – Kevin Yap
    Commented Oct 31, 2011 at 3:41
3

No one asked but:

Mouse Buttons:

Icon (<kbd>![image]</kbd>) Image link
RMB RMB https://i.sstatic.net/LPwD4.png
LMB LMB https://i.sstatic.net/FwrAW.png
MMB MMB https://i.sstatic.net/OASpJ.png
MW MW https://i.sstatic.net/v1vyT.png

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.sstatic.net/7Vtba.png
MWD MWD https://i.sstatic.net/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).

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.

You must log in to answer this question.

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