用图标替换菜单项（媒体查询 - PrestaShop主题）

Question

我已经收到了与我之前的问题相关的一些有价值的信息，但我仍然遇到媒体查询的问题。 上一个问题： Replace menu item with icon (Prestashop theme) 我正在使用这个演示： http://livedemo00.template-help.com/prestashop_53577

问题与移动设备上的外观有关。主页图标被隐藏。如何在最大宽度上产生类似效果：767像素等？ superfish-modified.css中的类不一样，我对此有点困惑。

已更改的CSS文件：

blocktopmenu.css http://pastebin.com/PzyhH9x6 此代码已添加：

.stickUpTop.isStuck .sf-menu li:first-child a:before {
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 55px;
  color: black;
  text-indent: 0;
  width: 0;
  left: 0;
}

.stickUpTop.isStuck .sf-menu li ul li a:before {
  content: none!important;
}
.stickUpTop.isStuck .sf-menu li:first-child a:after{
  width: 0;
}

SUPERFISH-modified.css： http://pastebin.com/f2JG4hnT 此代码已添加：

.sf-menu li:first-child a { 
text-indent: -9999em; 
white-space: nowrap; 
} 

.sf-menu li:first-child a:before{ 
content: "\f015"; 
font-family: "FontAwesome"; 
display: inline-block; 
font-size: 33px; 
line-height: 70px; 
color: black; 
text-indent: 0; 
width: auto; 
left: 0; 
} 

.sf-menu li ul li a:before{ 
content:none!important; 
}

Answer 1

你应该添加：

.sf-menu li:first-child a:before {
    position: absolute;
}

并删除superfished-modified.css第92行

content: "";

因为这样可以删除较小分辨率上的图标