Font-Awesome issue: how to remove menu-link text from a menu item with font-awesome icon?

Question

I installed the module Font awesome icons (with it's library) & the module Menu attributes; I've configured them, and now have a working font-icon in my main menu.

The problem is that instead of the desired icon, there is a combination of icon&Text (img1), and I need only an icon to appear... If there was an option to delete the text I would do that, But I haven't seen such an option - The menu-link text seems to be mandatory (img2).

I though of the css command text-indent: 200px to remove the text but the font itself is also text... Any ideas how to safely remove the text without removing the icon? Thx,

Answer 1

In this case you're better off using a background image. Save yourself the hassle.

.menulink{
  Width: 25px;
  Height: 0;
  Padding-top: 25px; /* height of image */
  Overflow: hidden;
  Background: url(images/home-25x25.png) 0 0 no-repeat;
}