Answers for "how to add a icon to input"

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>