CSS

add icon to input field

input {
    background-image: url(./JavaScript.png);
    background-position: 7px 7px;
    background-repeat: no-repeat;
  background-size: 20px 20px;
}

add icon to input

<!-- If using Bootstrap -->
<!-- Icon can be put before or after input -->
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">
  	<!-- Icon or Text here -->
  </span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  <span class="input-group-text" id="basic-addon1">
  	<!-- Icon or Text here -->
  </span>
</div>

<!-- Pure Css & Html -->
<!-- src: https://stackoverflow.com/a/40261155 -->
<style type="text/css">
  #input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
  }
  #input {
      height:20px;
      margin:0;
      padding-right: 30px;
      width: 100%;
  }
  #input_img {
      position:absolute;
      bottom:2px;
      right:5px;
      width:24px;
      height:24px;
  }
</style>
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

how to add icon in input button

<button class="btn btn-warning" type="reset">
    <i class="fa fa-times"></i> Clear
</button>

how to add icon to input field

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

show icon in input field

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;