Each button must have its own symbol on it. To obtain this result, we can use an HTML5 data-* attribute, such as data-symbol. HTML5 considers all data-* attributes valid and free for developers to be used to hold some application-specific information, such as in this case. We can then insert the value of the custom attribute inside the push button using the content property. Let's see how, but first we need to update our <a> elements. So let's edit index.html:
<a href="#" class="punch" data-symbol="!">PUNCH</a> <a href="#" class="jump" data-symbol="★">JUMP</a>
Note
To type the Black star (★) (Unicode character: U+2605), we can do a copy and paste from http://www.fileformat.info/info/unicode/char/2605/index.htm, or we can use the character map included in Windows.
Next, we need to add proper instructions to application.css:
/* text */
#arcade_game a:before{
font-family: 'Chango', cursive;
text-align: center;
color: rgba(255,255,255, 0.4);
text...