¿Cómo adaptar un icono png a un menú responsive css?

publicado por: Anonymous

Tengo un error en adaptar un icono png a un menú responsive, al cambiar el tamaño del navegador o al hacer la pantalla más pequeña el número de contacto salta de su ubicación. En cambio el texto en vez de saltar de su ubicación este se encima uno tras otro. ¿Cómo lograr el mismo efecto o el mismo estilo responsive con el icono png?.

Es decir que el icono también se encima uno tras otro, para evitar que el número de contacto salte de su ubicación.

Aquí el código completo y la demostración en ejecución: https://jsfiddle.net/e5t94cm7/ Si pueden observar al hacer la pantalla del navegador más pequeña el número de contacto salta de su ubicación.

Estilo css

a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
  text-decoration: underline;
}

.icon-phone:before {
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  background-image:url(http://www.imyshop.tk/font/icon/icon-phone.png);
  background-size:cover;
}

.icon-phone {
    float: left;
    display: inline;
    /*margin-right: -1px;*/
    padding: 8px 0px 0px 0px;
}

nav {
  width: 100%;
  background-color: rgba(0,0,0,0.1);
  height: 40px;
}

nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  float: left;
  text-align: center;
  width: 16.6667%; /* fallback for non-calc() browsers */
  width: calc(100% / 5);
  box-sizing: border-box;
}

nav ul li:first-child {
  border-left: none;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #616161;
  padding: 10px 0;
}

Menú html

<nav>
  <ul>
    <li><i class="icon-phone"></i><a href="tel:+02222222">02222222</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
  </ul>
</nav>

Existe alguna forma de lograrlo?

solución

El “problema” es que la imagen del teléfono se pone a través de un <i> (de manera similar a como lo hace Font Awesome o Bootstrap), y ese elemento ocupa un espacio que hace que el número de teléfono salte cuando las pantallas se hacen más pequeñas.

Una posibilidad para evitar que eso ocurra sería agregar la imagen de fondo a la propia celda que contiene el teléfono (y eliminar el elemento <i>). Algo como esto:

_x000D_

_x000D_

a {_x000D_
  color: #777;_x000D_
  text-decoration: none;_x000D_
}_x000D_
_x000D_
a:hover, a:focus {_x000D_
  color: #515151;_x000D_
  text-decoration: underline;_x000D_
}_x000D_
_x000D_
.icon-phone {_x000D_
  background-image:url(http://www.imyshop.tk/font/icon/icon-phone.png);_x000D_
  background-position:left center;_x000D_
  background-repeat: no-repeat;_x000D_
}_x000D_
_x000D_
nav {_x000D_
  width: 100%;_x000D_
  background-color: rgba(0,0,0,0.1);_x000D_
  height: 40px;_x000D_
}_x000D_
_x000D_
nav ul {_x000D_
  overflow: hidden;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
nav ul li {_x000D_
  list-style: none;_x000D_
  float: left;_x000D_
  text-align: center;_x000D_
  width: 16.6667%; /* fallback for non-calc() browsers */_x000D_
  width: calc(100% / 5);_x000D_
  box-sizing: border-box;_x000D_
}_x000D_
_x000D_
nav ul li:first-child {_x000D_
  border-left: none;_x000D_
}_x000D_
_x000D_
nav ul li a {_x000D_
  display: block;_x000D_
  text-decoration: none;_x000D_
  color: #616161;_x000D_
  padding: 10px 0;_x000D_
}

_x000D_

<nav>_x000D_
  <ul>_x000D_
    <li class="icon-phone"><a href="home.html">02222222</a></li>_x000D_
    <li><a href="about.html">About</a></li>_x000D_
    <li><a href="services.html">Services</a></li>_x000D_
    <li><a href="products.html">Products</a></li>_x000D_
    <li><a href="jobs.html">Jobs</a></li>_x000D_
  </ul>_x000D_
</nav>

_x000D_

_x000D_

_x000D_

Puedes cambiar el valor de background-size y background-position para que se ajuste mejor a lo que buscas (inicialmente había puesto contain y top left, pero creo que ahora se ve mejor).

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *