16

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.

24

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

  • 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 – alexanderpas Jul 4 '13 at 21:02
11

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

  • 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 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
7

Symbols for your copy pasting needs:

̲↓

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

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.

  • 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
1

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 .