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

Question

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

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

给出：

隐藏文字＆＃34;服装＆＃34;

的最佳方式是什么？

Answer 1

你只需要添加

text-indent: -9999em

到.sf-menu li：first-child，将文本缩进视图a然后

text-indent: 0

到.sf-menu li：first-child a：之前，重置伪选择器的属性