This Input element includes a magnifying glass as a graphic. I've tried Bootstrap several ways, but it always leaves the magnifying glass outside the input element. I've also thought about adding the chart as the background of the element, but the problem is that when I click on the browser, the cursor appears above the magnifying glass. Is there any other way to get it?
The problem is that the browser is inside a navigation bar and it doesn't work correctly, the icon moves to the edge of the window, but the input is fine. This is the code:
<div class="container-fluid">
<header>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menú</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">Empresa</a>
</div>
<form action="" id="navbar-1" class="collapse navbar-collapse navbar-form" role="search">
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-search"></i>
<input type="text" class="form-control" placeholder="Buscar en Empresa">
</div>
</form>
</nav>
</header>
Here are a couple of examples, one input with glyphicons and another without:
With bootstrap 3.x
Icon inside the Input
Bootstrap 2.x
Additional Information:
To know what the glyphicons are called, go to the bootstrap page
Help for bootstrap3 in Spanish
You already got an answer with Bootstrap. Here's an alternative with CSS3 (flexbox):