How Can I Add A Font-awesome Icon To A Textarea?

I am trying to add a font-awesome icon to the top-left corner of a textarea. I tried using the following solution but the alignment is off and the input text is vertically/horizon

Solution 1:

Here is a working example:

.text-box {
  margin: 30px auto;
  min-width: 480px;
}

.text-container {
  margin: 30px auto;
  white-space: nowrap;
  position: relative;
}
.text-container.text-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.text-containertextarea {
  position: absolute;
  top: 0;
  z-index: 1;
  color: black;
  background: none;
  padding-left: 15px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><divclass="text-box"><divclass="text-container"><spanclass="text-icon"><iclass="fa fa-list-ol"></i></span><textarearows="3">This is the text</textarea></div></div>

1. Note the absolute position of both the textarea and the icon inside the container.
2. Note the background of the textarea (i removed it so you will see the icon behind it). Another option is the use z-index to move the icon to the front.