Using Font Awesome in Google Autocomplete Pac-Input - css

Question

I am trying to use the Font Awesome Map Marker in a Google Autocomplete Input. My goal is to have the Map Marker to the left of the placeholder text, be able to add a color to just the map marker, and to have it always present even when the user is typing. So far I have tried:
<span class="google-address-bar"><input #pacinput id="pac-input" class="form-control" type="text" placeholder=" Enter Your Street Address">
</span>
with :
#pac-input {
font-family: Fira-Sans, FontAwesome, Serif;
background-color: #fff;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
but with this solution I am unable to add color to just the Map Marker and since it is placeholder, it disappears once the input is dirty. Has anyone accomplished this?

Answer 1

Use a <label> or <i> for the Font Awseome part and then position then icon over the input. Then all that is required is adjusting the padding.
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>