# 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][beard answer], 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:



<pre><code>&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;
</code></pre>

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 plunker] 

[![css screenshot][css screenshot]][css embed]

> **Note**: This presumes you're using [glyphicons][glyphicons], but works equally well with [font-awesome][font-awesome]. 
> For FA, just replace `.glyphicon` with `.fa`


--------------------------------------------------


# With Bootstrap:

As [buffer points out][buffer answer], this can be accomplished natively within Bootstrap by using [**Validation States with Optional Icons**][validation states]. 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:

<pre><code>&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;
</code></pre>

**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][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**][formChangs.css] (also inlined via hidden stack snippet at the bottom) ***LESS**: alternatively, if you are [building via less][less compiler], here's the [form changes in less][formChanges.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 plunker]

[![feedback screenshot][feedback screenshot]][feedback embed]

> **P.S.** [frizi's suggestion][frizi] of adding `pointer-events: none;` has been [added to bootstrap][pointer PR]

**Didn't find what you were looking for**? Try these similar questions:

* [Add Twitter Bootstrap icon to Input box][SO1]
* [Put search icon near textbox bootstrap][SO2]

### 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;
 }



[beard answer]: https://stackoverflow.com/a/19918345/1366033
[css plunker]: http://plnkr.co/edit/5D8fv5o5egpKpYz509O3?p=preview
[css embed]: http://embed.plnkr.co/5D8fv5o5egpKpYz509O3/preview
[css screenshot]: http://i.imgur.com/W6nybjN.png

[glyphicons]: http://glyphicons.com/
[font-awesome]: http://fortawesome.github.io/Font-Awesome/

[buffer answer]: https://stackoverflow.com/a/23229817/1366033
[validation states]: http://getbootstrap.com/css/#forms-control-validation
[pull-request]: https://github.com/twbs/bootstrap/pull/14194
[formChangs.css]: https://run.plnkr.co/plunks/ZrnnkFR3Yv9HGQHrRMiW/formChanges.css
[formChanges.less]: https://run.plnkr.co/plunks/ZrnnkFR3Yv9HGQHrRMiW/formChanges.less
[less compiler]: http://less2css.org/
[feedback plunker]: http://plnkr.co/edit/ZrnnkFR3Yv9HGQHrRMiW?p=preview
[feedback embed]: http://embed.plnkr.co/ZrnnkFR3Yv9HGQHrRMiW/preview
[feedback screenshot]: http://i.imgur.com/re67wct.png

[frizi]: https://stackoverflow.com/questions/18838964/#comment31018049_18839305
[pointer PR]: https://github.com/twbs/bootstrap/pull/14104

[SO1]: https://stackoverflow.com/a/16875617/1366033
[SO2]: https://stackoverflow.com/a/24682653/1366033

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:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/ijhXz.png

Add Bootstrap Glyphicon to Input Box

# Browser Bug Explanation

### According to [MDN on `top`][MDN]:

>For *relatively positioned elements* (those with `position: relative`), it *specifies the amount the element is moved below its normal position*. 
> **Note**: Percentage is applied as a percentage of the height of the element's containing block


### According to [W3 on `top`][w3]:


>For *relatively positioned* boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
> **Note**: Percentages refer to height of containing block


### Here's my guess:

I think what's happening is that when the [browser is first rendering the visual tree][browser], and sees `top:50%;`, it looks to the parent to set the height. Since no height has been specifically applied, and it has not loaded any child contents, the height of this div (and all divs) effectively *starts off as zero* until otherwise indicated. It then pushes down the glyph by 50% of zero.

When you toggle the property later, the browser has already rendered everything, so the calculated height of the parent container is provided by the height of its children. 

### Minimal, Complete, and Verifiable Example

**Note**: This doesn't really have anything to do with Bootstrap or Glyphicons. In order to avoid a dependency on bootstrap, we'll add `top: 1px` that would have been applied by the `.glyphicon` class. Even though it is overwritten by `50%`, it still plays an important role. 

Here's a simple set of parent/child elements:



 <div id="container">
 <div id="child">Child</div>
 </div>

In order to simulate the toggling the property in a more repeatable fashion, we can just wait two seconds and then apply a style in javascript like this:



 window.setTimeout(function() {
 document.getElementById("child").style.top = '50%';
 },2000);

### Example 1 ([jsFiddle][example1])

As a starting point, let's recreate your issue. 



 #container {
 position: relative;
 
 /* For Visual Effects */
 border: 1px solid grey;
 }
 #child {
 position: relative;
 height: 50px;
 top: 1px;
 
 /* For Visual Effects */
 border: 1px solid orange;
 width: 50px;
 margin: 0px auto;
 
 }


Notice that as soon as you resize the window, the browser will repaint the screen and move the element back to the top.

![example1 screen][example1 screen]

### Example 2 ([jsFiddle][example2])

If you add `top: 50%` to the child element, nothing will happen when the javascript adds the property because it won't have anything to overwrite.



### Example 3 ([jsFiddle][example3])

If you add `top: 49%` to the child element, then the DOM does have something to update so we'll get the weird glitch again.



### Example 4 ([jsFiddle][example4])

If you add `height: 50px;` to the container instead of the child, then the `top` property has something to position against right from the get go and you don't need to use toggle in JavaScript.



------

# How to Vertically Align

If you just wanted to know how to vertically center something consistently, then you can do the following:

The trick to vertically centering text is to set the [`line-height`][line-height] equal to the container height. If a line takes up 100 pixels, and the line of text online takes up 10, then browsers will try to center the text within the remaining 90 pixels, with 45 on the top and bottom.



<pre><code>.glyphicon-large {
 min-height: 260px;
 line-height: 260px;
}
</code></pre>

### [Solution in jsFiddle][fiddle solution]








[MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/top
[w3]: http://www.w3.org/TR/CSS2/visuren.html#propdef-top

[browser]: http://taligarsiel.com/Projects/howbrowserswork1.htm

[line-height]: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height


[firebug]: http://i.imgur.com/mzQvVsT.gif
[chrome]: http://i.imgur.com/uQFeVBV.gif

[example1 screen]: http://i.imgur.com/V03piFF.gif

[example1]: http://jsfiddle.net/KyleMit/tu9mpyeg/
[example2]: http://jsfiddle.net/KyleMit/tu9mpyeg/11/
[example3]: http://jsfiddle.net/KyleMit/tu9mpyeg/12/
[example4]: http://jsfiddle.net/KyleMit/tu9mpyeg/14/

[fiddle solution]: http://jsfiddle.net/KyleMit/Z9ZFr/

I have a glyphicon as such:



 <div class="col-xs-4 col-sm-2">
 	
 </div>



 .glyphicon-large {
 min-height: 260px;
 font-size: 35px;
 width: 1em;
 display: block;
 top: 50%;
 margin: -0.5em auto 0px;
 }

The glyphicon won't align to the center, vertically. When I open firefox, inspect element, and toggle off/on the `top 50%` rule, it suddenly works. How come?

Vertical align glyphicon in bootstrap 3

Using [bootstrap's native validation states][validation states] is probably preferable to writing custom CSS here. 
[And I'm pretty sure that I'm the one who came up with the CSS in question][my answer].

Just use `.has-feedback` on your form-group and `.form-control-feedback` on your icon:



 <div class="form-group has-feedback">
 <label class="control-label sr-only">DatePicker</label>
 <input type="text" class="form-control date-picker" /> 
 
 </div>

### [Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]



[validation states]: http://getbootstrap.com/css/#forms-control-validation

[fiddle]: http://jsfiddle.net/KyleMit/cyCFS/927/
[fiddle-show]: http://jsfiddle.net/KyleMit/cyCFS/927/show

[screenshot]: http://i.imgur.com/WTh8dUu.png
[my answer]: https://stackoverflow.com/revisions/18839305/5

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. 

My html looks like this:

 <div class="col-md-12">
 <div class='right-inner-addon col-md-2 date datepicker' 
 data-date-format="yyyy-mm-dd">
 <input name='name' value="" type="text" class="form-control date-picker"
 data-date-format="yyyy-mm-dd"/>
 
 </div>
 </div>

I have tried `position: absolute` like this:



 .right-inner-addon i {
 position: absolute;
 right: 5px;
 top: 10px;
 pointer-events: none;
 font-size: 1.5em;
 }
 .right-inner-addon {
 position: relative;
 }

But when I do it will look great in one spot, but will not be positioned correctly in another instance.

I have also tried to see if I could use `text-indent` to see if this would work throughout, but it had the same effect.



 .right-inner-addon i, 
 .form-group .right-inner-addon i {
 	display: inline-block;
 	z-index: 3;
 	text-indent: -15px;
 	font-size: 1.3em;
 }

[**Here's a jsFiddle that might help**](http://jsfiddle.net/ztS4t/)

Bootstrap 3 Placing Icon inside input field

The [glyphicons that come free with Bootstrap 3][0] is a subset of the [full paid Glyphicons library][0a] and doesn't include the social media icons set. 


Instead, you can use [**Font Awesome**][1], a free alternative that is fully supported (and the preferred icon kit in [Bootstrap 4][0c]), which has a free brand icon set:

[![enter image description here][2]][2]

### [Font Awesome Version 4 - Brands][3] - Demo in [jsFiddle][4] & Stack Snippets:





 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



 <style type="text/css">
 .fa {
 padding: 4px;
 width: 200px;
 }

 .fa::before {
 display: inline-block;
 /* .fa-fw */
 width: 1.28571429em;
 text-align: center;
 }

 .fa::after {
 content: attr(class);
 font-family: consolas, monospace;
 font-size: 15px;
 /* .code */
 padding: 2px 4px;
 color: #c7254e;
 background-color: #f9f2f4;
 border-radius: 4px;
 margin-left: 5px;
 }
 </style>



### For **Font Awesome 5**, you can still use brands with the separate [brands bundle][5]:

<pre><code>&lt;i class="fab fa-youtube"&gt;&lt;/i&gt;</code></pre>


 [0]: https://getbootstrap.com/docs/3.3/components/#glyphicons
 [0a]: http://www.glyphicons.com/
 [0c]: https://getbootstrap.com/docs/4.1/extend/icons/
 [1]: https://fontawesome.com/
 [2]: https://i.stack.imgur.com/uYI85.png
 [3]: https://fontawesome.com/v4.7.0/icons/#brand
 [4]: http://jsfiddle.net/KyleMit/y4tS8/
 [5]: https://fontawesome.com/icons?d=gallery&s=brands

I'm not able to use social media glyph-icons in bootstrap implemented web page.
I was able to use the usual ones like search, globe and many more.


This is how I used the usual ones:

 


How can you implement the above method for the social glyphicons?

How to use social glyphicons in bootstrap implemented web page?

Generally speaking, you [can't really modify any icon or glyph itself][1] any more than you can slightly alter the presentation of the character `'R'`. Icons are just glyphs or characters for a given font. 

However, all elements can have both a both a `color` and `background-color` property. So, in this case, you can just add a background color to the glyphicon element, which will apply a white *rectangular* background. In this particular instance, if you'd like the background to 'hug' closer to the icon which happens to be a circle, you can apply a `border-radius` of `50%` to turn the element into a circle. So you can accomplish like this:



 .my-plus {
 color: #006800;;
 background: white;
 border-radius: 50%;
 }

Alternatively, you could compose icons by stacking two or more icons together. 
You can [stack icons natively in Font-Awesome][2] or by [adding a little CSS to Bootstrap's Glyphicons][3]:



 
 
 
 

### [Demo in jsFiddle][5]

[![screenshot][4]][5]


 [1]: https://stackoverflow.com/a/25650632/1366033
 [2]: https://fontawesome.com/v4.7.0/examples/#stacked
 [3]: https://stackoverflow.com/a/23016243/1366033
 [4]: https://i.stack.imgur.com/ArjtY.png
 [5]: http://jsfiddle.net/KyleMit/8dTgv/

For the clickable span I want the inside of the glyphicon to be white and not show the elements behind it. How do I do that?

![glyphicon that is moved to right corner but showing background elements][1]

 [1]: http://i.stack.imgur.com/hu54S.png



 <ul class="summary">
 <li></li>
 <li class="summary-pendingitem">
 <input id="input-newrating-text" class="summary-pendingitem-text" 
 placeholder="rating's text"/>
 <input id="input-newrating-color" class="summary-pendingitem-color" 
 placeholder="rating's color"/>
 
 </li>
 </ul>



 .summary{
 position: relative;
 list-style-type: none;
 max-width: 18em;
 margin-top: 1em;
 
 }
 .summary li{
 border: 1px solid gray;
 }
 .summary li input{
 margin: .3125em;
 width: 96%;
 }
 #btn-addrating{
 position: absolute;
 top: -0.313em;
 right: -0.313em;
 font-size: 2em;
 color: #77dd77; 
 }