J. Davidson J. Davidson - 4 months ago 39
Javascript Question

Placing icon next to the input box

I have following code

<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<i class="fa fa-calendar"></i>
<input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker placeholder="Date" />

I am trying to put the icon next to the input box on the left or right. This code right now places it on two lines. I have checked other similar postings here but I am not using jquery or ways they are doing it.
Please let me know how I can change the code to put the date icon next to the box.


As for what i know, the <i> tag is short for <italic>(atleast for HTML 4.01). I would rather try using an <img> tag.

Also, for the placing next to each other part. I would give the textarea a class with "display:inline-block"


  <style type="text/css">
    <img class="fa fa-calendar inline" src="yourIcon"></img>
    <input type="text" class="inline"/>