How can I add a font-awesome icon to a textarea?

Question

I am trying to add a font-awesome icon to the top-left corner of a textarea. I tried using the following solution

.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;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-box">
  <div class="text-container">
    <span class="text-icon">
      <i class="fa fa-list-ol"></i>
    </span>
    <textarea rows="3">
          
    </textarea>
  </div>
</div>

but the alignment is off and the input text is vertically/horizontally centered.

Did you try the solution there? Did you try anything at all? — Dekel, Aug 18 '17 at 20:16
Questions should stand on their own. If the question you linked to is deleted then yours loses all value. — j08691, Aug 18 '17 at 20:17
You have a complete example in the link you provided. Did you try to use it? — Dekel, Aug 18 '17 at 20:18
Sure it is. You want to do the same thing - the details vary only sightly. — ceejayoz, Aug 18 '17 at 20:33
As for your code you've added, the class `icon` doesn't exist in your HTML. — ceejayoz, Aug 18 '17 at 20:33

score 1 · Answer 1 · answered Aug 18 '17 at 20:37

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-container textarea {
  position: absolute;
  top: 0;
  z-index: 1;
  color: black;
  background: none;
  padding-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-box">
  <div class="text-container">
    <span class="text-icon">
      <i class="fa fa-list-ol"></i>
    </span>
    <textarea rows="3">This is the text</textarea>
  </div>
</div>

Note the absolute position of both the textarea and the icon inside the container.

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.

There is one problem with this implementation: if I have any html afterwards, the textarea runs over it. For example, if I have another input afterwards, you see this problem. — user1876508, Aug 19 '17 at 03:25
Try to play with the width/height of the container, it should fix this problem. — Dekel, Aug 21 '17 at 09:26

How can I add a font-awesome icon to a textarea?

1 Answers1

Linked