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

Question

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

问题与移动设备上的外观有关。隐藏主页图标。如何对 max-width: 767 px 等产生类似的效果？类在 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;
}

超级鱼-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: "";

因为这就是在较小分辨率下删除图标的原因

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

Replace menu item with icon (Media Queries - PrestaShop theme)

themes

media-queries

prestashop

font-awesome