Add Bootstrap Glyphicon To Input Box


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:

<div class="inner-addon left-addon">     <i class="glyphicon glyphicon-user"></i>     <input type="text" class="form-control" /> </div>

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

css screenshot

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:

<div class="form-group has-feedback">     <label class="control-label">Username</label>     <input type="text" class="form-control" placeholder="Username" />     <i class="glyphicon glyphicon-user form-control-feedback"></i> </div>

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

feedback screenshot

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

.has-feedback .form-control {   padding-right: 34px; } .has-feedback .form-control.input-sm, .has-feedback.form-group-sm .form-control {   padding-right: 30px; } .has-feedback .form-control.input-lg, .has-feedback.form-group-lg .form-control {   padding-right: 46px; } .has-feedback-left .form-control {   padding-right: 12px;   padding-left: 34px; } .has-feedback-left .form-control.input-sm, .has-feedback-left.form-group-sm .form-control {   padding-left: 30px; } .has-feedback-left .form-control.input-lg, .has-feedback-left.form-group-lg .form-control {   padding-left: 46px; } .has-feedback-left .form-control-feedback {   left: 0; } .form-control-feedback {   line-height: 34px !important; } .input-sm + .form-control-feedback, .form-horizontal .form-group-sm .form-control-feedback {   width: 30px;   height: 30px;   line-height: 30px !important; } .input-lg + .form-control-feedback, .form-horizontal .form-group-lg .form-control-feedback {   width: 46px;   height: 46px;   line-height: 46px !important; } .has-feedback label.sr-only ~ .form-control-feedback, .has-feedback label.sr-only ~ div .form-control-feedback {   top: 0; } @media (min-width: 768px) {   .form-inline .inline-feedback {     position: relative;     display: inline-block;   }   .form-inline .has-feedback .form-control-feedback {     top: 0;   } } .form-horizontal .has-feedback-left .form-control-feedback {   left: 15px; }


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

enter image description here


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; }

Comments

Post a Comment

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Answer : VACUUM is only needed on updated or deleted rows in non-temporary tables. Obviously you're doing lots of INSERTs but it's not obvious from the description that you're also doing lots of UPDATEs or DELETEs. These operations can be tracked with the pg_stat_all_tables view, specifically the n_tup_upd and n_tup_del columns. Also, even more to the point, there is a n_dead_tup column that tells, per table, how much rows need to be vacuumed. (see Monitoring statistics in the doc for functions and views related to statistics gathering). A possible strategy in your case would be to suppress the scheduled VACUUM, keeping an eye on this view and checking on which tables the n_dead_tup is going up significantly. Then apply the aggressive VACUUM to these tables only. This will be a win if there are large tables whose rows never get deleted nor updated and the aggressive VACUUM is really necessary only on smaller tables. But keep running the ANALYZE for the optimiz
Read more

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?

Answer : Diagram machinery works also for perturbation theory in classical statistical mechanics and classical field theories. Generally, various kinds of diagrams constitute a pictorial way of talking about tensor products and their contractions while hiding the multi-linear algebra from the layman. In the simplest case, vertices (or blobs) represent vectors, matrices, tensors; vertices have ingoing and/or outgoing ports; ingoing ports denote (contravariant) ro indices; outgoing ports denote (covariant) co indices; directed arcs between blobs give a pair of equal indices summed over; different base spaces ⇔ \Leftrightarrow ⇔ different arc types; symmetric tensors ⇔ \Leftrightarrow ⇔ undirected diagrams; no labels are needed for internal lines. In many cases, the directed arcs are decorated (as thin, thick, broken,wavy, curly lines), each decoration indicating the presence of a so-called propagator, a function of its label to use as a weight in the sum, which may beco
Read more