Icone in input with bootstrap

Question

How do I add an icon from bootstrap in my input in this way:

Answer 1

You can use the class input-group-addon to do as you wish.

See the low example:

<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="form-group">
  <div class="input-group">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
      </span>
    <input class="form-control left-border-none" type="text" placeholder="Ida" />
  </div>
</div>


<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
</form>

View documentation.

Answer 2

You can also make the icon look inside the input positioning it on it and adding a padding-left in the input, example:

.left-inner-addon {
    position: relative;
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
    color: #666;
}
.left-inner-addon input.form-control {
    padding-left: 30px;
}

<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="row">
  <div class="col-xs-6">
    <div class="form-group left-inner-addon">
      <i class="glyphicon glyphicon-calendar"></i>
      <input type="text" class="form-control" placeholder="Ida">
    </div>
  </div>
</div>

Answer 3

Use the classes input-group and input-group-btn as in the example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6">
  <div class="input-group">
    <span class="input-group-btn">
      <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-calendar"></i>
      </button>
    </span>
    <input type="text" class="form-control" />
  </div>
</div>

Reference: bootstrap documentation (in English)

Answer 4

You can put a div as the example below.

<div class="input-group-addon">@</div>