title: How can I add a font-awesome icon to a textarea?
body: <p>I am trying to add a font-awesome icon to the top-left corner of a textarea. I tried using the following solution</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-box {
    margin: 30px auto;
    min-width: 480px;
  }
  
  .text-container {
    margin: 30px auto;
    white-space: nowrap;
    position: relative;
  }
  
  .icon textarea {
    position: absolute;
    top: 50%;
    margin-left: 17px;
    margin-top: 17px;
    z-index: 1;
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="text-box"&gt;
    &lt;div class="text-container"&gt;
      &lt;span class="text-icon"&gt;
        &lt;i class="fa fa-list-ol"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;textarea rows="3"&gt;
            
      &lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but the alignment is off and the input text is vertically/horizontally centered.</p>