Add an icon to input text as a non part of it - css

Question

I'm using bootstrap 2.3.2, and I have a form that contains an input text.
In the right of the input text I have an icon.
And this is the html for that input text :
<div class="right-inner-addon">
<input type="text" placeholder="Recherche un article" class="search-query">
<i class="fa fa-search"></i>
</div>
And this is it's style :
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 7px 12px;
padding-left: 10px;
}
The problem is that when I type some long text, this text is written under that search icon :
I want when I write a long text to not be written under the search icon, how can I do that ?

Answer 1

I've used the Bootstrap 2.3.2 version and use below CSS code to place the search icon at right side.
.right-inner-addon{position:relative;}
.right-inner-addon input {
padding-right: 30px;
height:30px;
}
.right-inner-addon i {
padding: 7px 12px;
padding-left: 11px;
position: absolute;
top: 10px;
right:0
}
.icon-search {
background-position: -36px 3px;
}
and the HTML code look like this.
<form class="navbar-form pull-left form-search">
<div class="right-inner-addon">
<input type="text" placeholder="Recherche un article" class="search-query">
<i class="icon-search"></i>
</div>
</form>
Here is the working Demo. https://refork.codicode.com/351.cod