How to add <i> inside input element using twitter-bootstrap? -


i want icon show inside input, pushed right. here's have:

    <div id="side-menu" class="sidebar-nav span2">         <div class="row-fluid" id="search-container">             <div class="span1"></div>             <div class="span10"><span><input class="search-input" type="text" placeholder="search"><i id="side-search-icon"class="icon-search"></i></span></div>             <div class="span1"></div>         </div>     </div> 

jsfiddle: http://jsfiddle.net/ptskr/52/

you cannot place element directly inside input element (as @ray toal said), can manipulate css.

http://jsfiddle.net/p4qqx/2/

#side-search-icon{ margin-left: -25px; } 
<div id="side-menu" class="sidebar-nav span2">     <div class="row-fluid" id="search-container">         <div class="span1"></div>         <div class="span10">             <input class="search-input" type="text" placeholder="search" />             <span id="side-search-icon"class="icon-search"></span>         </div>         <div class="span1"></div>     </div> </div> 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -