Marilee Marilee - 1 year ago 151
CSS Question

Add a location marker glypphicon inside text input area

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
element NOT inside a ` element, so I belief that os where my problem is.

IM trying to achieve the following look:

enter image description here

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 Source

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';
    position: relative;
    left: -5px;
    content: "\f041";

<p class="wrapper"><input placeholder="&#61447; Username"></p>

then add a font awesome CDN to your code:

<link rel="stylesheet" href="" integrity="sha256-uXf0U0UCIqBp2J3S53b28h+fpC9uFcA8f+b/NNmiwVk=" crossorigin="anonymous" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download