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: 30p...