Add a location marker glypphicon inside text input area - css

Question

Im using bootstrap and trying to add a location glyphicon marker inside a text input element
I tried adding the glypicon class to the input area like this:
<input type="text" class="form-control glyphicon glyphicon-map-marker" >
I follwed an example on W3Schools with botostrap glyphicons the example included the glyphicon marker inside a <span> element NOT inside a ` element, so I belief that os where my problem is.
IM trying to achieve the following look:
The example website where I got the image from uses the location marker as a background image in their css...
background-image: url(data:image/png;base64);
Any advice as to how to tackle this problem, much appreciated.

Answer 1

You could try implementing this Font Awesome icon inside the field - here's a relevant question that will help you achieve your desired result.
.wrapper input[type="text"] {
position: relative;
}
input { font-family: 'FontAwesome'; } /* This is for the placeholder */
.wrapper:before {
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f041";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" integrity="sha256-uXf0U0UCIqBp2J3S53b28h+fpC9uFcA8f+b/NNmiwVk=" crossorigin="anonymous" />
<p class="wrapper"><input placeholder=" Username"></p>

Answer 2

Try It Once
.areabox{
width:auto;
border:1px solid #dddddd;
}
.areabox,.icon{
float:left;
}
.icon{
color:#dddddd;
font-size:18px;
padding:5px;
}
.areabox input{
border:0px;
padding:5px;
font-size:12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="areabox"><span class="glyphicon glyphicon-map-marker icon"></span>
<input type="text" placeholder="Pickup Location"/>
</div>

Answer 3

I haven't tried it but I think this might work.
<div class="form-group has-feedback has-feedback-left">
<label class="control-label">Pickup Location</label>
<input type="text" class="form-control" placeholder="Pickup Location" />
<i class="glyphicon glyphicon-map-marker form-control-feedback"></i>
</div>