View on GitHub

Icon input

Easily overlay an icon on an input.

On this page

Examples

html

<div class="input-with-icon">
  <input type="text" value="Example input" class="form-control">
  <span class="icon">
    <img src="/docs/assets/img/examples/calendar.svg" alt="Calendar">
  </span>
</div>

CSS

Sass variables

$input-icon-top:                  $spacer * .4;
$input-icon-left:                 $spacer * .6;
$input-icon-color:                $gray-400;
$input-icon-control-padding-left: $spacer * 1.9;