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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With