Replace menu item with icon (Prestashop theme)

问题:

I'd like to ask you about the way to replace the text with icon (home icon as the first menu child).

My css is similar to this one: http://livedemo00.template-help.com/prestashop_53577/

I've added this code at the end of the 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;
}

which gives:

What's the best way to hide the text "Clothing"?

回答1:

You just need to add

text-indent: -9999em

to .sf-menu li:first-child, to indent the text out of view a and then

text-indent: 0

to .sf-menu li:first-child a:before, to reset the property for the pseudo selector