JSFiddle - React, Tailwind, and code Playground

icon in input

by hronic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id='b-icon'>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <input type="text">
</div>
 
 <div id='f-icon'>
    <input type="text" placeholder="Лицевой счет">
 </div>

CSS

@import "http://fonts.fontstorage.com/import/adventpro.css";

    * {
        margin: 0;
        padding: 0;
    }


    html,
    body {
        width: 100%;
        height: 100%;
        background-color: #065b79;
        overflow: auto;
    }
    /* b-icon */
 #b-icon input {
  height: 30px;
  border-radius: 5px;
}

  #b-icon i.fa {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: -30px;
  position: relative;
  z-index: 1;
  float: left;
}

  #b-icon i.fa + input {
  padding-left: 30px;
}

    /* f-icon */
    #f-icon {
      margin-top: 25px;
    }
    #f-icon input{
    	padding-right:55px;
    	background-color: transparent;
    	background-image: url(https://png.icons8.com/windows/50/0063B1/edit);
    	background-repeat: no-repeat;
      background-position: right;
    	outline: none;
    	color: #fff;
    	text-align: left;
    	font-size: 35px;
    	font-family: 'Advent';
    	border: 0;
    	border-bottom: .1px solid #fff; 
    }
 #f-icon input::placeholder {color:#fff;text-align: center;}