Unicode arrows

Show ▼ Hide ▲ Sort ascending ▼ Sort descending ▲ ◀ Back More options ▶

Unicode declaration:
For this to work, you need to use either
• not define the encoding
• or define it as UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Font:
Also be sure the arrows are in arial, sans-serif and set to a font size in either % or em that is equivilant to 10px at the default browser font size.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  <style type="text/css">
    /*  The 62.8% is a magic number to have the ems comparable to px just multiplied by 10. 
        Having the body font size of 62.8% means that 1.3em = 13px. */
    body { padding:15px; font-size:62.8%; font-family:arial,sans-serif; } 
    span { font-size:1.3em; color:#00c; text-decoration:underline; cursor:pointer; cursor:hand; }
    span.arrow { font-size:7px; text-decoration:none; position:relative; top:-1px;}
  </style>
  <!--[if lte IE 6]>
  <style type="text/css">
    /*  IE6 renders the up/down arrow smaller than all other browsers for some reason */
    span.arrow { font-size:1.2em; line-height:0; top:0; }
  </style>  
  <![endif]-->
</head>

<body>
  <span>Show</span><span class=arrow> &#9660;</span><br>
  <span>Hide</span><span class=arrow> &#9650;</span><br>
  <span class=arrow>&#9664; </span><span>Back</span><br>
  <span>More options</span><span class=arrow> &#9654;</span>
</body>
</html>