¿Cómo puedo lograr que una imagen se establezca como fondo en un elemento de mi navbar
?
Lo he intentado de esta manera.
<nav class="navbar navbar-default navbar-inverse " >
<div id="navigation">
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >
<h4 >MENU <b class="caret"></b></h4>
</a>
<ul class="dropdown-menu" >
<li class="dropdown-header" ><a href="#" ><h4>PRODUCTOS</h4></a></li>
<li class="divider"></li>
<li><a href="pacas.html"><h4>Pacas Credenciales</h4></a></li>
</ul>
</li>
<li role="presentation" ><a href="locacion.html"><h4> LOCATION</h4></a></li>
<li role="presentation" ><a href="dama.html"><h4> CONTACTANOS</h4></a></li>
<li role="presentation" ><a href="index.html" class="a"><h4 class="h"><img class="imagen" src="assets/images/home.png"></h4></a></li>
</ul>
Y este es mi código CSS
:
.imagen{
margin: 0;
display:inline-block;
height: 18px;
float:none;
}
Pero la imagen no abarca todo el elemento ya que se visualiza así.
Yo desearía que todo ese cuadro sea la imagen del icono Home y no que se vea tan pequeña la imagen, he intentado jugar con el tamaño de la imagen pero no logro adaptarla ya que si incremento el tamaño se distorsiona y se torna mas grande que los demás elementos, ¿Alguna sugerencia? Estoy usando bootstrap.