用图标替换菜单项（Prestashop 主题）答案

【问题标题】：Replace menu item with icon (Prestashop theme)用图标替换菜单项（Prestashop 主题）
【发布时间】：2015-07-07 08:18:04
【问题描述】：

我想请教一下用图标替换文本的方法（主页图标作为第一个菜单子项）。

我的 css 和这个类似： http://livedemo00.template-help.com/prestashop_53577/

我在 global.css 的末尾添加了这段代码：

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

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

给出：

隐藏“服装”文本的最佳方法是什么？

【问题讨论】：

标签： icons prestashop font-awesome menubar

【解决方案1】：

你只需要添加

text-indent: -9999em

to .sf-menu li:first-child，将文本缩进到视图 a 之外，然后

text-indent: 0

to .sf-menu li:first-child a:before，重置伪选择器的属性

【讨论】：

谢谢。您能否提供一些有价值的提示如何忽略文本宽度和悬停？我的意思是将图标保持在固定位置。那么我应该为每个@media 添加相同的 css 吗？
您需要将width: auto;left: 0; 添加到.sf-menu li:first-child a:before。对于其他@media，这取决于您在视觉上想要什么。
你是什么意思“当文本有更大的宽度”？您指的是 “服装” 吗?如果您输入width: auto，那应该不是问题。至于其他设备，只需将position: absolute; 放入 .sf-menu li:first-child a:before
确实有几个字，有问题：将white-space: nowrap;添加到.sf-menu li:first-child a。那么悬停呢？我不明白你的问题
让我们continue this discussion in chat。