Add Twitter Bootstrap icon to Input box

Question

How can we add a Twitter Bootstrap icon icon-search to the right of a text input element   The following attempt placed all the icons inside the input element  how can we crop it so it only displays the icon for icon-search   Current Attempt    CSS  input search-box       width  180px      background   333      background-image  url   img glyphicons-halflings-white png        background-position  -48px 0      padding-left  30px      margin-top  45px      border  0      float  right

User · Answer

Bootstrap 4 x  With Bootstrap 4  and Font Awesome   we still can use the input-group wrapper around our form-control element  and now we can use an input-group-append  or input-group-prepend  wrapper with an input-group-text to get the job done    lt div class  input-group mb-3  gt     lt input type  text  class  form-control  placeholder  Search  aria-label  Search  aria-describedby  my-search  gt     lt div class  input-group-append  gt       lt span class  input-group-text  id  my-search  gt  lt i class  fas fa-filter  gt  lt  i gt  lt  span gt     lt  div gt   lt  div gt    It will look something like this  thanks to KyleMit for the screenshot      Learn more by visiting the Input group documentation

User · Answer

For bootstrap 4           lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 0 css bootstrap min css  integrity  sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4  crossorigin  anonymous  gt                lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt               lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 0 umd popper min js  integrity  sha384-cs chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY  20VyM2taTB4QvJ  crossorigin  anonymous  gt  lt  script gt               lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 0 js bootstrap min js  integrity  sha384-uefMccjFJAIv6A rW L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt 6v9KI65qnm  crossorigin  anonymous  gt  lt  script gt           lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet  gt           lt form class  form-inline my-2 my-lg-0  gt                           lt div class  input-group  gt                               lt input class  form-control  type  search  placeholder  Search  gt                               lt div class  input-group-append  gt                                   lt div class  input-group-text  gt  lt i class  fa fa-search  gt  lt  i gt  lt  div gt                               lt  div gt                           lt  div gt                       lt  form gt    Demo

User · Answer

Bootstrap 4 x with 3 different way    Icon with default bootstrap Style    lt div class  input-group  gt         lt input type  text  class  form-control  placeholder  From  aria-label  from  aria-describedby  from  gt         lt div class  input-group-append  gt           lt span class  input-group-text  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt         lt  div gt       lt  div gt   Icon Inside Input with default bootstrap class    lt div class  input-group  gt         lt input type  text  class  form-control border-right-0  placeholder  From  aria-label  from  aria-describedby  from  gt         lt div class  input-group-append  gt           lt span class  input-group-text bg-transparent  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt         lt  div gt    lt  div gt   Icon Inside Input with small custom css    lt div class  input-group  gt         lt input type  text  class  form-control rounded-right  placeholder  From  aria-label  from  aria-describedby  from  gt           lt span class  icon-inside  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt       lt  div gt     Custom Css   icon-inside         position  absolute        right  10px        top  calc 50  - 12px         pointer-events  none        font-size  16px        font-size  1 125rem        color   c4c3c3        z-index 3            x000D   x000D   icon-inside   x000D        position  absolute  x000D        right  10px  x000D        top  calc 50  - 12px   x000D        pointer-events  none  x000D        font-size  16px  x000D        font-size  1 125rem  x000D        color   c4c3c3  x000D        z-index 3  x000D        x000D   lt link rel  stylesheet  type  text css  href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css    gt  x000D       lt link rel  stylesheet  href  https   use fontawesome com releases v5 2 0 css all css  integrity  sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK iSvJ a4 0owXq79v lsFkW54bOGbiDQ  crossorigin  anonymous  gt  x000D   x000D       lt div class  container  gt  x000D       lt h5 class  mt-3  gt Icon  lt small gt with default bootstrap Style lt  small gt  lt h5 gt  x000D       lt div class  input-group  gt  x000D         lt input type  text  class  form-control  placeholder  From  aria-label  from  aria-describedby  from  gt  x000D         lt div class  input-group-append  gt  x000D           lt span class  input-group-text  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt h5 class  mt-3  gt Icon Inside Input  lt small gt with default bootstrap class lt  small gt  lt h5 gt  x000D       lt div class  input-group  gt  x000D         lt input type  text  class  form-control border-right-0  placeholder  From  aria-label  from  aria-describedby  from  gt  x000D         lt div class  input-group-append  gt  x000D           lt span class  input-group-text bg-transparent  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D       lt h5 class  mt-3  gt Icon Inside Input lt small gt  with small custom css lt  small gt  lt h5 gt  x000D       lt div class  input-group  gt  x000D         lt input type  text  class  form-control rounded-right  placeholder  From  aria-label  from  aria-describedby  from  gt  x000D           lt span class  icon-inside  gt  lt i class  fas fa-map-marker-alt  gt  lt  i gt  lt  span gt  x000D       lt  div gt  x000D   x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Since the glyphicons image is a sprite  you really can t do that  fundamentally what you want is to limit the size of the background  but there s no way to specify how big the background is  Either you cut out the icon you want  size it down and use it  or use something like the input field prepend append option  http   twitter github io bootstrap base-css html forms and then search for prepended inputs

User · Answer

Updated Bootstrap 3 x You can use the  input-group class like this   lt div class  quot input-group quot  gt       lt input type  quot text quot  class  quot form-control quot   gt       lt span class  quot input-group-addon quot  gt           lt i class  quot fa fa-search quot  gt  lt  i gt       lt  span gt   lt  div gt   Working Demo in jsFiddle for 3 x  Bootstrap 2 x You can use the  input-append class like this   lt div class  quot input-append quot  gt       lt input class  quot span2 quot  type  quot text quot  gt       lt button type  quot submit quot  class  quot btn quot  gt           lt i class  quot icon-search quot  gt  lt  i gt       lt  button gt   lt  div gt   Working Demo in jsFiddle for 2 x  Both will look like this   If you d like the icon inside the input box  like this   Then see my answer to Add a Bootstrap Glyphicon to Input Box

[html] Add Twitter Bootstrap icon to Input box

Examples related to html

Examples related to css

Examples related to twitter-bootstrap