用图标替换菜单项（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;
}

给出：

隐藏文本的最佳方法是什么 "Clothing"？

Answer 1

您只需添加

text-indent: -9999em

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

text-indent: 0

到 .sf-menu li:first-child a:before，为伪选择器

重置属性

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

Replace menu item with icon (Prestashop theme)

icons

prestashop

font-awesome

menubar