You should have a look on how the glyphicon span works:
If you inspect it, you will see that the interesting part in this span is actually its pseudo-element, the :before that calls a font of icons as a content.
A few solutions are actually possible to resolve your problem.
Override
One of the solution would be to override that pseudo element by
redeclaring its content:
.rechercheProduit .input-group-addon {
/* Declaring the parent as relative so the .glyphicon-search child span
as a position absolute to its parent..
That probably doesn't make any sense. */
position: relative;
}
.rechercheProduit .glyphicon-search {
/* 'absolute' in the .input-group-addon context */
position: absolute;
top: auto;
bottom: 0;
left: 5px;
height: 80%;
width: auto;
overflow: hidden;
}
.rechercheProduit .glyphicon-search:before {
content: '';
display: block;
width: 50px; /* Generic width */
height: 100%;
background: url('https://i.stack.imgur.com/vr0uy.png') no-repeat;
background-size: auto 100%;
}
.rechercheProduit .text-upper-style {
/* relative to its context. Especially here to deal with the display order. */
position: relative;
margin-left: 20px;
}
Demo 1
Custom span
Another solution, which would probably be better, would be to
actually create your own span with your own pseudo-element (CSS is
similar to the last example, renaming the .glyphicon-search part
obviously):
<span class="input-group-addon">
<span class="search-icon"></span>
<span class="hidden-xs text-upper-style">
Rechercher</span>
</span>
Demo 2
Image
Even if I personally prefer having the icon as a background image
here (have a look on this question and its answers), declaring
the icon as an image is another solution that works.
c.f. the answer of tmg about that.
About the rest
To go beyond with your code, you should think about the fact that you are working in a form with an input[type="text"] as main input.
You’ll have to submit this form and unless you deal with a click event on this main span to submit your form, you’ll have to declare your rechercher span as an input as well (type=“submit”).
That would be semantically more correct and easier for you to deal with this button action in the future.
My final proposition would then be:
(also considering the "custom" span icon solution)
<div class="input-group">
<input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
<label class="input-group-addon">
<span class="search-icon"></span>
<input type="submit" value="Rechercher" class="hidden-xs text-upper-style" />
</label>
</div>
-
.text-upper-style {
background: none;
text-transform: uppercase;
border: 0;
outline: 0;
}
.rechercheProduit .input-group-addon {
border: 0;
}
Demo 3
About the responsive, just declare a min-width on your label:
.rechercheProduit .input-group-addon {
min-width: 40px;
overflow: hidden;
}
Hope this makes sense. I'm open to any kind of suggestion, edit, etc...
Bon chance!
