Replace menu item with icon (Prestashop theme)

Question

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"?

Answer 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