How put icon inside textarea?

Question

i want to put this icon inside of my textarea in below image.

and here is my code:

<div class="form-group" style="text-align: right;width: 100%;">
          <textarea row=100 cols=60
                    type="text"
                    id="input"
                    formControlName="txt"
                    placeholder="متن ...">
          </textarea>
          <span class="icon-user"></span>
        </div>

anyone knows how i must do for this problem ?

This has already been asked before: https://stackoverflow.com/questions/45764431/how-can-i-add-a-font-awesome-icon-to-a-textarea — aman, Nov 02 '18 at 17:21

score 5 · Accepted Answer · answered Nov 02 '18 at 17:25

5

Here is the example: https://jsbin.com/laduyemewo/edit?html,css,output

The crucial changes here is to the set position: relative; to the parent <div class="form-group"> and apply for <span class="icon-user"></span> - position: absolute; with a bottom and left properties based on your sizes.

answered Nov 02 '18 at 17:25

pepsilike

206
1
7

One problem is when you are start resizing the textarea field – Eugene Khristo Jul 13 '23 at 07:29

score 0 · Answer 2 · answered Nov 02 '18 at 17:21

You can achieve it using css like this.
.icon-user { position:relative; top: -10px; left: -100px; }
Adjust the values of top and left according to your needs. :)
Other way you could add position: absolute to both the textarea and the icon.

How put icon inside textarea?

2 Answers2