Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad

¿Como poner Poner una imagen como icono de un elemento?

Tengo una consulta, ¿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 codigo csscódigo CSS:

.imagen{
    margin: 0;
    display:inline-block;
    height: 18px;
    float:none;
 
}

Pero la imágenimagen no abarca todo el elemento ya que se visualiza asiasí.

introducir la descripción de la imagen aquí

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 .

¿Como poner una imagen como icono de un elemento?

Tengo una consulta, ¿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 codigo css:

.imagen{
    margin: 0;
    display:inline-block;
    height: 18px;
    float:none;
 
}

Pero la imágen no abarca todo el elemento ya que se visualiza asi.

introducir la descripción de la imagen aquí

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 .

Poner una imagen como icono de un elemento

¿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í.

introducir la descripción de la imagen aquí

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 .

Buenas, tengoTengo una consulta, ¿Cómo puedo lograr que una imagen se establezca como fondo en un elemento de mi navbar? lo

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 codigo css:

.imagen{ margin: 0; display:inline-block; height: 18px; float:none;

}

.imagen{
    margin: 0;
    display:inline-block;
    height: 18px;
    float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi.

introducir la descripción de la imagen aquí

Pero yoYo desearía que todo ese cuadro sea la imagen del icono HomeHome 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.

Buenas, tengo una consulta, ¿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 codigo css:

.imagen{ margin: 0; display:inline-block; height: 18px; float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi

introducir la descripción de la imagen aquí

Pero 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.

Tengo una consulta, ¿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 codigo css:

.imagen{
    margin: 0;
    display:inline-block;
    height: 18px;
    float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi.

introducir la descripción de la imagen aquí

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 .

Buenas, tengo una consulta, ¿como puedo lograr que una imagen se establezca como fondo en un elemento de mi navbar? lo he intetado de esta manera

Buenas, tengo una consulta, ¿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 codigo css

Y este es mi codigo css:

.imagen{ margin: 0; display:inline-block; height: 18px; float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi

introducir la descripción de la imagen aquí

Pero yo desearia 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 demas elementos, ¿Alguna sugerencia? Estoy usando Bootstrap

Pero 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.

Buenas, tengo una consulta, ¿como puedo lograr que una imagen se establezca como fondo en un elemento de mi navbar? lo he intetado 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 codigo css

.imagen{ margin: 0; display:inline-block; height: 18px; float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi

introducir la descripción de la imagen aquí

Pero yo desearia 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 demas elementos, ¿Alguna sugerencia? Estoy usando Bootstrap

Buenas, tengo una consulta, ¿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 codigo css:

.imagen{ margin: 0; display:inline-block; height: 18px; float:none;

}

Pero la imágen no abarca todo el elemento ya que se visualiza asi

introducir la descripción de la imagen aquí

Pero 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.

Origen Enlace
Alejandro Ruiz
  • 379
  • 7
  • 13
  • 21
Loading