How to group an icon and an input element

I’m trying to achieve the following:

  • Create 3 input elements in a row
  • Each should have a logo to the left of it, centered perfectly.
  • Each should have a border-bottom that spans the logo as well.

Like the following image:

However with my current code the images can’t be centered and the border doesn’t span them. Here’s my code:

input {
  border: none;
  width: 250px;
  background-color: #393d49;
  border-bottom: 1px solid #767D93;
  padding: 10px;
}

form img {
  width: 24px;
  height: 24px;
}
<form>
      <img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
      <input type="email" placeholder="E-Mail"><br>

      <img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
      <input type="password" placeholder="Password"><br>
      
      <img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">      
      <input type="text" placeholder="Username"><br>
    </form>


As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.

form, .form-row, input {
    background-color: #051024;
}

.input-icon, label, input {
  display: inline-block;
}

form {
  padding: 0.8em 1.2em;
}

.form-row {
  padding: 0.8em 0;
  padding-bottom: 0.2em;
}

.form-row:not(:last-child) {
  border-bottom: solid #18273a 1px; /* Only the last row has a border */
}

.input-icon {
  width: 15px;
  height: 15px;
  margin: 0 10px;
}

label {
  max-width:4em; /* Or the maximum width you want your lebel to be */
  min-width:4em; /* Same */
  color:white;
  font-weight: 100;
}

input {
   border:none;
   padding: 0.8em 0.5em;
   color: #6691c9;
   font-size: 15px;
   outline: none; /* No glowing borders on chrome */
}
<form>
    <div class="form-row">
        <!-- Put your image here, like so -->
        <img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
        <label for="form-email">Email</label>
        <input id="form-email" type="email">
    </div>

    <div class="form-row">
        <img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
        <label for="form-password">Password</label>
        <input id="form-password"type="password" placeholder="(8 characters min)">
    </div>
      
    <div class="form-row">
        <img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
        <label for="form-user">User</label>   
        <input id="form-user" type="text"><br>
    </div>
</form>

If you’re feeling adventurous

Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).

i used fontawesome for Icon