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


this question has answer here:

i trying add font-awesome icon top-left corner of textarea. tried using 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 alignment off , input text vertically/horizontally centered.

here 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 text</textarea>    </div>  </div>

  1. note absolute position of both textarea , icon inside container.
  2. note background of textarea (i removed see icon behind it). option use z-index move icon front.

Comments

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

angular - DownloadURL return null in below code -

php - Cannot override Laravel Spark authentication with own implementation -