Search icon is not visible in search box - html

Question

I want to have a clickable search icon inside the search box but the icon is not visible in the search box.The class icon-search does not seem to be working.I used bar instead of navbar for customizing its height and its working fine.Plus,how should I customize the height of the search box?
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
XYZ
</span>
<span class="col-xs-5 right-inner-addon ">
<i class="icon-search"></i>
<input type="text" class="form-control" />
</span>
</div>
</div>
.right-inner-addon {
padding-top: 6px;
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 6px;
pointer-events: none;
}
.bar{
min-width: 800px;
background-color: #563d7c;
width:100%;
height:43px;
box-shadow: 0px 3px 25px #888888;
position: fixed;
}

Answer 1

If you are using Bootstrap 3 you can try using the following code: http://jsfiddle.net/D2RLR/5888/
<div class="bar navbar-inverse navbar-fixed-top">
<div class="container">
<span id="logo">
XYZ
</span>
<span class="col-xs-5 right-inner-addon ">
<div class="input-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Test" />
<span class="input-group-addon" for="search">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</span>
</div>
</div>