Add Bootstrap Glyphicon to Input Box

Question

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

User · Answer

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    x000D   x000D   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    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 3 umd popper min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  gt  lt  script gt  x000D   lt div class  container  gt  x000D     lt div class  col-md-5  gt  x000D    lt input type  text  id  date  class  form-control my-icon  placeholder  Select     gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use its Unicode HTML  So to add a user icon  just add  amp  xe008  to the placeholder attribute  or wherever you want it   You may want to check this cheat sheet   Example    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt input type  text  class  form-control  placeholder   amp  xe008  placeholder     style  font-family   Glyphicons Halflings   Arial  gt  x000D   lt input type  text  class  form-control  value   amp  xe008  value     style  font-family   Glyphicons Halflings   Arial  gt  x000D   lt input type  submit  class  btn btn-primary  value   amp  xe008  submit-button  style  font-family   Glyphicons Halflings   Arial  gt  x000D   x000D   x000D       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

User · Answer

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   lt form class  quot form form-horizontal col-xs-12 quot  gt       lt div class  quot form-group quot  gt           lt div class  quot col-xs-7 quot  gt               lt span class  quot usericon quot  gt                   lt input class  quot form-control quot  id  quot name quot  placeholder  quot Username quot    gt               lt  span gt           lt  div gt       lt  div gt   lt  form gt   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   quot  e008 quot       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

User · Answer

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   lt form gt     lt div class  form-group  gt       lt div class  col-xs-5  gt         lt div class  input-group  gt             lt span class  input-group-addon transparent  gt  lt span class  glyphicon glyphicon-user  gt  lt  span gt  lt  span gt             lt input class  form-control left-border-none  placeholder  User Name  type  text  name  username  gt         lt  div gt       lt  div gt     lt  div gt   lt  form gt    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

User · Answer

Without Bootstrap   We ll get to Bootstrap in a second  but here s the fundamental CSS concepts in play in order to do this yourself   As beard of prey points out  you can do this with CSS by absolutely positioning the icon inside of the input element   Then add padding to either side so the text doesn t overlap with the icon   So for the following HTML    lt div class  quot inner-addon left-addon quot  gt       lt i class  quot glyphicon glyphicon-user quot  gt  lt  i gt       lt input type  quot text quot  class  quot form-control quot    gt   lt  div gt    You can use the following CSS to left and right align glyphs      enable absolute positioning     inner-addon        position  relative         style icon     inner-addon  glyphicon     position  absolute    padding  10px    pointer-events  none        align icon     left-addon  glyphicon    left   0px    right-addon  glyphicon   right  0px       add padding      left-addon input    padding-left   30px     right-addon input   padding-right  30px      Demo in Plunker       Note  This presumes you re using glyphicons  but works equally well with font-awesome    For FA  just replace  glyphicon with  fa     With Bootstrap   As buffer points out  this can be accomplished natively within Bootstrap by using Validation States with Optional Icons   This is done by giving the  form-group element the class of  has-feedback and the icon the class of  form-control-feedback   The simplest example would be something like this    lt div class  quot form-group has-feedback quot  gt       lt label class  quot control-label quot  gt Username lt  label gt       lt input type  quot text quot  class  quot form-control quot  placeholder  quot Username quot    gt       lt i class  quot glyphicon glyphicon-user form-control-feedback quot  gt  lt  i gt   lt  div gt    Pros    Includes support for different form types  Basic  Horizontal  Inline  Includes support for different control sizes  Default  Small  Large    Cons     Doesn t include support for left aligning icons   To overcome the cons  I put together this pull-request with changes to support left aligned icons   As it is a relatively large change  it has been put off until a future release  but if you need these features today  here s a simple implementation guide   Just include the these form changes in css  also inlined via hidden stack snippet at the bottom  LESS  alternatively  if you are building via less  here s the form changes in less  Then  all you have to do is include the class  has-feedback-left on any group that has the class  has-feedback in order to left align the icon   Since there are a lot of possible html configurations over different form types  different control sizes  different icon sets  and different label visibilities  I created a test page that shows the correct set of HTML for each permutation along with a live demo   Here s a demo in Plunker       P S  frizi s suggestion of adding pointer-events  none  has been added to bootstrap   Didn t find what you were looking for  Try these similar questions    Add Twitter Bootstrap icon to Input box Put search icon near textbox bootstrap   Addition CSS for Left Aligned feedback icons   x000D   x000D   has-feedback  form-control   x000D    padding-right  34px  x000D    x000D   has-feedback  form-control input-sm  x000D   has-feedback form-group-sm  form-control   x000D    padding-right  30px  x000D    x000D   has-feedback  form-control input-lg  x000D   has-feedback form-group-lg  form-control   x000D    padding-right  46px  x000D    x000D   has-feedback-left  form-control   x000D    padding-right  12px  x000D    padding-left  34px  x000D    x000D   has-feedback-left  form-control input-sm  x000D   has-feedback-left form-group-sm  form-control   x000D    padding-left  30px  x000D    x000D   has-feedback-left  form-control input-lg  x000D   has-feedback-left form-group-lg  form-control   x000D    padding-left  46px  x000D    x000D   has-feedback-left  form-control-feedback   x000D    left  0  x000D    x000D   form-control-feedback   x000D    line-height  34px  important  x000D    x000D   input-sm    form-control-feedback  x000D   form-horizontal  form-group-sm  form-control-feedback   x000D    width  30px  x000D    height  30px  x000D    line-height  30px  important  x000D    x000D   input-lg    form-control-feedback  x000D   form-horizontal  form-group-lg  form-control-feedback   x000D    width  46px  x000D    height  46px  x000D    line-height  46px  important  x000D    x000D   has-feedback label sr-only    form-control-feedback  x000D   has-feedback label sr-only   div  form-control-feedback   x000D    top  0  x000D    x000D   media  min-width  768px    x000D     form-inline  inline-feedback   x000D      position  relative  x000D      display  inline-block  x000D      x000D     form-inline  has-feedback  form-control-feedback   x000D      top  0  x000D      x000D    x000D   form-horizontal  has-feedback-left  form-control-feedback   x000D    left  15px  x000D    x000D   x000D   x000D

User · Answer

If you are using Fontawesome you can do this     lt input type  text  style  font-family Arial  FontAwesome   placeholder   amp  xf007     gt    Result    The complete list of unicode can be found in the The complete Font Awesome 4 6 3 icon reference

User · Answer

I also have one decision for this case with Bootstrap 3 3 5     lt div class  col-sm-5  gt       lt label for  date  gt          lt input type  date  placeholder  Date  id  date  class  form-control  gt                lt  label gt       lt i class  glyphicon glyphicon-calendar col-sm-pull-2  gt  lt  i gt   lt  div gt    On input I have something like this

User · Answer

x000D   x000D  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    x000D   lt input class  search  gt  x000D   x000D   x000D

User · Answer

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            lt h1 gt Tasty Field Validation Icons using only css transform lt  h1 gt       lt label gt I am just a poor boy nobody loves me lt  label gt       lt input class  is-invalid  gt  lt span class  glyphicon glyphicon-exclamation-sign is-invalid-x  gt  lt  span gt    http   codepen io anon pen RPRmNq editors 110

User · Answer

The official method  No custom CSS required    lt form class  quot form-inline quot  role  quot form quot  gt     lt div class  quot form-group has-success has-feedback quot  gt       lt label class  quot control-label quot  for  quot inputSuccess4 quot  gt  lt  label gt       lt input type  quot text quot  class  quot form-control quot  id  quot inputSuccess4 quot  gt       lt span class  quot glyphicon glyphicon-user form-control-feedback quot  gt  lt  span gt     lt  div gt   lt  form gt   DEMO   http   jsfiddle net yajf3b7q This demo is based on an example in Bootstrap docs  Scroll down to  quot With Optional Icons quot  here http   getbootstrap com css  forms-control-validation

User · Answer

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    x000D   x000D  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    x000D   lt input class  search  gt  x000D   x000D   x000D

User · Answer

This  cheat  will work with the side effect that the glyphicon class will change the font for the input control   Fiddle   lt input class  form-control glyphicon  type  search  placeholder   amp  57347    gt    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   lt input class  form-control glyphicon  type  search  placeholder   amp  57347  search    gt   lt input class  form-control glyphicon  type  text   placeholder   amp  57352  username    gt   lt input class  form-control glyphicon  type  password   placeholder   amp  57395  password    gt

User · Answer

You should be able to do this with existing bootstrap classes and a little custom styling    lt form gt       lt div class  input-prepend  gt           lt span class  add-on  gt               lt i class  icon-user  gt  lt  i gt           lt  span gt           lt input class  span2  id  prependedInput  type  text  placeholder  Username  style  background-color   eeeeee border-left   eeeeee   gt       lt  div gt               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

User · Answer

Here s a CSS-only alternative  I set this up for a search field to get an effect similar to Firefox   amp  a hundred other apps    Here s a fiddle   HTML   lt div class  col-md-4  gt     lt input class  form-control  type  search    gt     lt span class  glyphicon glyphicon-search  gt  lt  span gt   lt  div gt    CSS   form-control     padding-right  30px      form-control    glyphicon     position  absolute    right  0    padding  8px 27px

User · Answer

Here is how I did it using only the default bootstrap CSS v3 3 1    lt div class  form-group  gt       lt label class  control-label  gt Start  lt  label gt       lt div class  input-group  gt           lt input type  text  class  form-control  aria-describedby  start-date  gt           lt span class  input-group-addon  id  start-date  gt  lt span class  glyphicon glyphicon-calendar  gt  lt  span gt  lt  span gt       lt  div gt   lt  div gt    And this is how it looks

[css] Add Bootstrap Glyphicon to Input Box

Tested with Bootstrap 4.

Examples related to css

Examples related to twitter-bootstrap

Examples related to glyphicons