在响应式菜单项上使用背景图像的正确方法

Question

HTML：

<ul class="nav">
  <li><a>[phone]</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>[phone]</a></li>
</ul>

Here is link

Answer 2

尝试使用::之前

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

那是你想要的吗？