Verwenden von Font Awesome in Google Autocomplete Pac-Eingabe

Question

Ich versuche, den Font Awesome Map Marker in einem Google Autocomplete-Eingang zu verwenden. Mein Ziel ist es, den Kartenmarker links vom Platzhaltertext zu haben, eine Farbe nur zu der Kartenmarkierung hinzufügen zu können und sie immer präsent zu haben, selbst wenn der Benutzer tippt. Bisher habe ich versucht:

<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder="&#xf041; Enter Your Street Address"> </span>

mit:

#pac-input { font-family: Fira-Sans, FontAwesome, Serif; background-color: #fff; width: 400px; height: 45px; font-size: 15px; font-weight: 300; text-overflow: ellipsis; }

aber mit dieser Lösung, die ich nicht in der Lage bin Farbe hinzufügen, um nur die Map-Markierung und da es Platzhalter ist, verschwindet es einmal Die Eingabe ist schmutzig. Hat das jemand erreicht?

Answer 1

Verwenden Sie eine <label> oder <i> für den Font Aswseome Teil und dann Position Symbol über die input. Dann ist alles, was erforderlich ist, die Polsterung anzupassen.

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.google-address-bar { 
 
    position: relative; 
 
} 
 
.google-address-bar i.fa { 
 
    color: red; 
 
    position: absolute; 
 
    height: 45px; 
 
    line-height: 45px; 
 
    padding-left: .5em; 
 
} 
 
#pac-input { 
 
    font-family: Fira-Sans, Serif; 
 
    background-color: #fff; 
 
    width: 400px; 
 
    height: 45px; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    padding-left: 1.5em; 
 
    text-overflow: ellipsis; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="google-address-bar"><i class="fa fa-map-marker"></i> 
 
    <input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address"> 
 
</span>