Правильный способ использования фонового изображения в адаптивном пункте меню

Question

HTML:

<ul class="nav">
  <li><a>+7123123123132</a></li>
</ul>

CSS:

.nav .li {
  background: url(../images/phone.svg) no-repeat left center;
  background-position: left 5.9375rem center;
  background-size: 16px 16px;
}

Результат:

Если япереключиться на XS - значки телефона перекрывают номер телефона, но если я выберу большее разрешение, тогда все в порядке.

Может быть, я не использую правильный подход для добавления значка меню?

Answer 1

Проверьте это.Вы можете использовать псевдокласс

.phone {
  position: relative;
  padding-left: 20px;
}

.phone:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: url(https://use.fontawesome.com/releases/v5.0.13/svgs/solid/phone.svg);
  background-size: 16px 16px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul class="nav">
  <li class='phone'><a>+7123123123132</a></li>
</ul>

Вот ссылка

Answer 2

Попробуйте использовать :: до

.nav a::before {
    content: '';
    background: url ( '../images/phone.svg');
    width: 16px;
    height: 16px;
    display: inline-flex;
}

Это то, что вы хотели?