Add a location marker glypphicon inside text input area

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.

Related: http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder — Alexander Nied, Oct 06 '16 at 05:07
Link: http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box This link have a clear answer to your question. — Kumaraguru, Oct 06 '16 at 05:48

score 6 · Accepted Answer · edited May 23 '17 at 12:01

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="&#61447; Username"></p>

Samudrala Ramu · Answer 2 · 2016-10-06T05:17:10.273

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>

score 1 · Answer 3 · answered Oct 06 '16 at 05:19

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>

Add a location marker glypphicon inside text input area

3 Answers3