Hinzufügen von Font-Awesome-Icon im inneren Eingang

Ich versuche die möglichen Lösungen hier gepostet mit diesem problem, aber keine funktioniert mit meinem code, das ist, was ich 

<div class="search">
  <span class="fa fa-user"></span>
  <input placeholder="Username...">
</div>
<div class="search">
   <span class="fa fa-lock"></span>
   <input placeholder="*******">
</div>

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
   position: relative;
   color: #aaa;
   font-size: 16px;
}
.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}

Ich soll das Symbol vor dem Platzhalter.

Hier der Beispiel-code

InformationsquelleAutor Francisco Fernandez | 2016-06-15
  1. 1

    Versuchen, diese, ich habe nur noch etwas css, um Ihre Symbole.

    .search .fa-user { 
        position: absolute;
        top: 10px;
        left: 10px;
    }

.search .fa-lock { 
        position: absolute;
        top: 10px;
        left: 10px;
    }

    Hier ist Ihr code aktualisiert

    InformationsquelleAutor Francisco Fernandez
  2. 1
    <style>
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
}
.search input {
  width: 250px;
  height: 32px;

  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}

.search .fa-user { 
            position: absolute;
            top: 10px;
            left: 10px;
        }
.search .fa-lock { 
            position: absolute;
            top: 10px;
            left: 10px;
        }

</style>
<div class="search">
  <span class="fa fa-user"></span>
  <input placeholder="Username...">
</div>
<div class="search">
  <span class="fa fa-lock"></span>
  <input placeholder="*******">
</div>
    InformationsquelleAutor Rico_93
Schreibe einen Kommentar