title: how to make <Span> above a button, clickable (as the button)?
body: <p><a href="http://fiddle.jshell.net/vew8bv6y/" rel="nofollow">See this fiddle</a></p>
  
  <p>I want the "eye" icon on the one hand to appear as it is now (above the button, so I don't think a z-index would help), yet on the other hand I want to have the button clickable at all its surface, meaning in the eye area as well.</p>
  
  <p>Also, is there a better way to position the eye? as once I'm using different text then "Click me", I would have to accordingly set the absolute position of the eye. any way to define it better?</p>
  
  <pre><code>&lt;form action="1.php" method="POST" target="_blank"&gt;
      &lt;input type="submit" class="button" value="Click Me"&gt;&lt;span class="fa fa-eye fa-lg foo" "&gt;&lt;/span&gt;
  &lt;/form&gt;
  
  .foo{
       color:red;
      font-size:1.7em;
      position: absolute;
      height: 11px;
      top: 18px;
      left: 15px;
      pointer-events: none;
  }
  
  .button {
      display: inline-block;
      zoom: 1;
      line-height: normal;
      white-space: nowrap;
      vertical-align: baseline;
      text-align: center;
      cursor: pointer;
      -webkit-user-drag: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      font-family: inherit;
      font-family: arial;
      font-size: 17px;
      padding: .5em .9em .5em 2em;
      text-decoration: none;
      border-radius: 4px;
      text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  }
  </code></pre>