How to adapt a png icon to a responsive css menu?

I have an error adapting a png icon to a responsive menu, resizing the browser or making the screen smaller the contact number jumps from its location. Instead the text instead of jumping from its location is over one after another. How to achieve the same effect or responsive style with png icon?.

That is to say that the icon is also over one after another, to prevent the contact number from jumping from its location.

Here the full code and running demo: https://jsfiddle.net/e5t94cm7 / if they can observe by making the browser screen smaller the contact number jumps from their location.

Style 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;
}

Menu 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>

Is there any way to achieve this?

 2
Author: Otto, 2016-08-09
Source

3 answers

The "problem" is that the phone image gets put through a <i> (similarly to how Font Awesome or Bootstrap does it), and that element takes up a space that causes the phone number to jump when the screens get smaller.

One possibility to prevent that from happening would be to add the background image to the cell itself containing the phone (and remove the <i> element). Something like this: 

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

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

.icon-phone {
  background-image:url(http://www.imyshop.tk/font/icon/icon-phone.png);
  background-position:left center;
  background-repeat: no-repeat;
}

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;
}
<nav>
  <ul>
    <li class="icon-phone"><a href="home.html">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>

You can change the value of background-size and background-position to better fit what you're looking for (I had initially put contain and top left, but I think it looks better now).

 1
Author: Alvaro Montoro, 2016-08-09 02:46:07

To .icon-phone:before { put a display:inline; and fixed

All I do is give it the same property display as the rest of the sibling elements

 0
Author: Daniel Díaz, 2016-11-16 15:08:49

I find it curious that you use <i> to add icons just like Font Awesome, used by Sencha, and Glyphicons, the library that uses Bootstrap. If so just add to the <i> classes of each glyphos library, for Font Awesome would be <i class="fas fa-phone"> while for Bootstrap would be <i class="glyphicon glyphicon-earphone">.

Using glyphos is much more effective than using PNG, since, being text, it allows you to modify color and size by CSS easily.

As for your the problem with line change is that due to lack of space the text does not fit in a single line, but you can force it like this: 

.icon-phone {
    white-pace: nowrap
}

However, this will cause it to overlap with its sibling elements.

As you say it's a responsive design, the solution to that problem is to use a mediaquery to control the view for a new smaller device. Both Bootstrap and Sencha have solutions for these cases. If you're using them, I recommend you take a look at the documentation.

If not then here I leave you a little simulation: 

$( document ).ready(function() {

  var clickBurguer = function() {
  //Ocultamos o mostramos el menú asociado a la hamburguesa que ha sido pulsada
   $('.hamburguer').on('click', function(){
     var thisMenu = $(this).siblings('.menu');
     $(thisMenu).toggleClass('hidden'); //Cambiamos entre los estados visible y oculto
   });
  }
  clickBurguer(); //Inicializamos clickBurguer
});
a {
  color: #777;
  text-decoration: none;
}

a:hover, a:focus {
  color: #515151;
  text-decoration: underline;
}
.icon-phone {
  white-space: nowrap;
}
.icon-phone:before {
  content: url(https://fakeimg.pl/16x16/);
  display: inline;
  margin-right: 5px;
  vertical-align: middle;
}

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

nav ul {
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  box-sizing: border-box;
  list-style: none;
  text-align: center;
  width: 16.6667%; /* fallback for non-calc() browsers */
  width: calc(100% / 5);
  padding: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #616161;
}
.hamburguer {
 display: none;
 }
@media only screen and (max-width: 768px){
  nav ul li {
  display: block;
  width: auto;
  }
.hamburguer {
 display: inline-block;
 width: 3.125rem;
 height: 3.125rem;
 background: transparent url(https://fakeimg.pl/16x16/) no-repeat center center;
 border: 0;
 }
 .hidden {
  display: none;
 }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <button type="button" class="hamburguer"></button>
  <ul class="menu hidden">
    <li class="icon-phone"><a href="home.html">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>

This code is just a small example within a sniped limited by the width of its container. To see how to make a responsive menu correctly better consult the source .

 0
Author: Daniel Abril, 2019-01-27 14:42:19