J. Davidson J. Davidson - 1 month ago 7
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" />
</div>


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.

Answer

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"

Example:

<html>
<head>
  <style type="text/css">
    .inline{
      display:inline-block;
    }
  </style>
</head>
<body>
  <div>
    <img class="fa fa-calendar inline" src="yourIcon"></img>
    <input type="text" class="inline"/>
  </div>
</body>
</html>`