响应式菜单项背景图标正确用法咨询：移动端图标与文字重叠

老哥，其实你这个图标添加方式本身没啥问题，核心问题出在固定的background-position值没做响应式适配上——你用了固定的left 5.9375rem，在大屏上这个距离足够，但到XS小屏时，容器宽度收缩，这个固定距离占比变大，就会导致图标和手机号挤在一起重叠。另外你原CSS里的选择器.nav .li是错误的，应该写成.nav li（li是标签选择器，不是类选择器），这个小细节也得纠正下。

先把你当前的代码贴出来方便对照：

你的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; 
}

解决方法推荐 #

这里给你几个靠谱的方案，按推荐程度排序：

1. 利用padding预留图标空间（最稳妥）

给<a>标签添加padding-left，把背景图标放在padding区域内，这样文字永远不会覆盖图标，适配所有屏幕：

.nav li a {
  padding-left: 28px; /* 图标宽度16px + 12px间距，可按需调整 */
}
.nav li {
  background: url(../images/phone.svg) no-repeat left center; 
  background-size: 16px 16px;
  /* 去掉固定的left偏移，让图标默认在padding区域最左侧 */
}

2. 用媒体查询针对XS断点调整定位值

如果不想改padding，就给小屏单独设置更小的background-position：

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

/* 假设XS断点是max-width: 576px，根据你的项目框架调整 */
@media (max-width: 576px) {
  .nav li {
    background-position: left 1rem center; /* 小屏用更小的偏移值 */
  }
}

3. 使用相对单位替代固定rem

把固定的5.9375rem换成百分比或者vw单位，让偏移量随屏幕宽度自适应：

.nav li { 
  background: url(../images/phone.svg) no-repeat left center; 
  background-position: left 20% center; /* 用百分比，可按需调整 */
  background-size: 16px 16px; 
}

内容的提问来源于stack exchange，提问作者Alexander Kim