Icon on input with bootstrap

Navigation
1

How do I add a bootstrap icon in my input like this:

    
asked by anonymous 06.06.2017 / 19:09

4 answers

3

You can also make the icon appear within input by positioning it on it and adding padding-left to input , eg: 

.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><scriptsrc="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>
    
06.06.2017 / 19:26
4

You can use the input-group-addon class to do what you want.

See the example below: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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 the documentation.

    
06.06.2017 / 19:19
1

Use the input-group and input-group-btn classes 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

    
06.06.2017 / 19:17
0

You can put a div as the example below. 

<div class="input-group-addon">@</div>
    
06.06.2017 / 19:12
What is the difference of. for - in PHP? Compile-time type checking ADVPL