title: making an <i> tag the value of a <input type='button'>
body: <p>I am using <a href="https://fortawesome.github.io/Font-Awesome/" rel="nofollow">Font Awesome</a>, and would like to make the value of a simple <code>&lt;input type='button'&gt;</code> one of the fa icons e.g. <code>&lt;i class='fa fa-bold'&gt;&lt;/i&gt;</code></p>
  
  <p>However, when I write:</p>
  
  <pre><code>&lt;input id='bold' type='button'&gt;&lt;i class='fa fa-bold'&gt;&lt;/i&gt;&lt;/input&gt;
  </code></pre>
  
  <p>it renders a button and then, to the right of that, the Font Awesome icon. 
  Is this not something feasible to achieve? </p>