March 18, 2016

Bootstrap add glyphicon to input box

Bootstrap add glyphicon to input box : We often need to add icons in input fields. Css frameworks like bootstrap has made the designer’s life easy by providing rich inbuilt functionality. In bootstrap you can easily add the icons using the icon classes. Here in this tutorial we are going to explain how you can add the glyphicons in the input box. We will also provide the online demo to try it online.

Bootstrap add glyphicon to input box Example

You can add icon simply as below –

Example 1 : Add telphone Icon in Bootstrap Text Box

Let us add telphone icon in the text box –

Bootstrap add glyphicon to input box : Example 1

<form class="form-inline" role="form">
  <div class="form-group has-feedback has-feedback-left">
    <label class="control-label">Phone</label>
    <input type="text" class="form-control">
    <i class="glyphicon glyphicon-phone-alt form-control-feedback"></i>
  </div>
</form>

Try it »

The above example will add the telephone icon in the text box. if you run the above example it will produce the output like this –

Bootstrap add glyphicon to input box

Example 2 : Add Calendar Icon in Bootstrap Text Box

Let us add calendar icon in the text box –

Bootstrap add icon to input box : Example 1

<form class="form-inline" role="form">
  <div class="form-group has-feedback has-feedback-left">
    <label class="control-label">Calender</label>
    <input type="text" class="form-control">
    <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
  </div>
</form>

Try it »

The above example will add the calendar icon in the text box. if you run the above example it will produce the output like this –

Bootstrap add glyphicon to input box Add calendar in text box in bootstrap example

Example 3 : Add Email Icon in Bootstrap Text Box

Let us add email icon in the text box –

Bootstrap add email icon to input box : Example 1

<form class="form-inline" role="form">
  <div class="form-group has-feedback has-feedback-left">
    <label class="control-label">Email</label>
    <input type="text" class="form-control">
    <i class="glyphicon glyphicon-envelope form-control-feedback"></i>
  </div>
</form>

Try it »

The above example will add the email icon in the text box. if you run the above example it will produce the output like this –

Bootstrap add glyphicon to input box

Bootstrap add glyphicon to input box