[css] Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:

Here's another way to do it by placing the glyphicon using the :before pseudo element in CSS.

Working demo in jsFiddle

For this HTML:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Use this CSS (Bootstrap 3.x and Webkit-based browsers compatible)

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

As @Frizi said, we have to add pointer-events: none; so that the cursor doesn't interfere with the input focus. All the others CSS rules are for centering and adding the proper spacing.

The result:

Here is a non-bootstrap solution that keeps your markup simple by embedding the image representation of the glyphicon directly in the CSS using base64 URI encoding.

input {_x000D_
  border:solid 1px #ddd;_x000D_
}_x000D_
input.search {_x000D_
 padding-left:20px;_x000D_
 background-repeat: no-repeat;_x000D_
 background-position-y: 1px;_x000D_
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);_x000D_
}

<input class="search">

I also have one decision for this case with Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

On input I have something like this:

The official method. No custom CSS required :

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO : http://jsfiddle.net/yajf3b7q

This demo is based on an example in Bootstrap docs. Scroll down to "With Optional Icons" here http://getbootstrap.com/css/#forms-control-validation

If you are using Fontawesome you can do this :

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Result

The complete list of unicode can be found in the The complete Font Awesome 4.6.3 icon reference

You can use its Unicode HTML

So to add a user icon, just add  to the placeholder attribute, or wherever you want it.

You may want to check this cheat sheet.

Example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">_x000D_
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">_x000D_
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Don't forget to set the input's font to the Glyphicon one, using the following code: font-family: 'Glyphicons Halflings', Arial, where Arial is the font of the regular text in the input.

Tested with Bootstrap 4.

Take a form-control, and add is-valid to its class. Notice how the control turns green, but more importantly, notice the checkmark icon on the right of the control? This is what we want!

Example:

.my-icon {_x000D_
    padding-right: calc(1.5em + .75rem);_x000D_
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');_x000D_
    background-repeat: no-repeat;_x000D_
    background-position: center right calc(.375em + .1875rem);_x000D_
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);_x000D_
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>_x000D_
<div class="container">_x000D_
  <div class="col-md-5">_x000D_
 <input type="text" id="date" class="form-control my-icon" placeholder="Select...">_x000D_
  </div>_x000D_
</div>

You should be able to do this with existing bootstrap classes and a little custom styling.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Edit The icon is referenced via the icon-user class. This answer was written at the time of Bootstrap version 2. You can see the reference on the following page: http://getbootstrap.com/2.3.2/base-css.html#images

This 'cheat' will work with the side effect that the glyphicon class will change the font for the input control.

Fiddle

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

If you want to get rid of the side effect you can remove the "glyphicon" class and add the following CSS (There may be a better way to style the placeholder pseudo element and I've only tested on Chrome).

Fiddle

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Possibly an even cleaner solution:

Fiddle

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

If you are fortunate enough to only need modern browsers: try css transform translate. This requires no wrappers, and can be customized so that you can allow more spacing for input[type=number] to accomodate the input spinner, or move it to the left of the handle.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Here is how I did it using only the default bootstrap CSS v3.3.1:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

And this is how it looks:

It can be done using classes from the official bootstrap 3.x version, without any custom css.

Use input-group-addon before the input tag, inside of input-group then use any of the glyphicons, here is the code

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Here is the output

To customise it further add a couple of lines of custom css to your own custom.css file (adjust padding if needed)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

By making the background of the input-group-addon transparent and making the left gradient of the input tag to zero the input will have a seamless appearance. Here is the customised output

Here is a jsbin example

This will solve the custom css problems of overlapping with labels, alignment while using input-lg and focus on tab issue.

Here's a CSS-only alternative. I set this up for a search field to get an effect similar to Firefox (& a hundred other apps.)

Here's a fiddle.

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}