use images as a icon in the input box - css

Question

I have tried different ways for this but none of them were working for me so I am asking this question.
I have a images
I do have the following form
<div className="login-form">
<form className="form-horizontal" id="loginForm">
<div className="form-group" id="username-div">
<input type="email" className="form-control usertext" id="username" placeholder="Email" />
</div>
</div>
</div>
I tried using the position absolute as well. but not working.
So, How can I resolve this issue ?
Any hint or help will be helpful.

Answer 1

There are several ways you can achieve this, one is to use absolute positioning and put the icon inside the input, but I prefer this way:
.custom-input {
background-color: white;
border: 2px solid #ededed;
padding: 6px;
width: 215px;
border-radius: 3px;
}
.custom-input>* {
vertical-align: middle;
}
.custom-input img {
width: 25px;
height: 25px;
display: inline-block;
}
.custom-input input {
border: none;
height: 40px;
display: inline-block;
outline: none;
margin-left: 6px;
}
<div class="custom-input">
<img src="https://i.stack.imgur.com/KNLAq.png" alt="user-icon" />
<input type="text" placeholder="username" />
</div>
But, please note that it's not the recommended way, and it's better to use font-icons for this case. There are already lots of beautiful, and elegant font icons for this case.

Answer 2

You can set background-image of the input element to use your image and then use padding to adjust cursor/placeholder position, Here's sample css:
input {
background-image:url(https://i.stack.imgur.com/KNLAq.png);
background-repeat: no-repeat;
background-size: contain;
padding-left:20px;
}

Answer 3

You can use fontawesome library for this use:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" placeholder=" Username" style="font-family:Arial, FontAwesome" />

Answer 4

You can use Font awesome icons in place holder as and link font awesome cdn to your page using following code
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
then add font awesome icon using its code value(CSS content Value)
<input type="text" name="text" placeholder=" " style="font-family:Arial, FontAwesome">
and set font-family to FontAwesome