1

I'm using a fontawesome icon in a menu (with the tbmegamenu module) and I want to remove the text. Drupal forces me to enter something,   doesn't work so as a temporary solution I put at dot . How can I remove the dot without resorting to very dirty CSS tricks?

The house with the dot

See also the actual HTML at the website.

Nothing

Entering an empty string in the menu title would be the cleanest way to get to a solution now. Maybe it's possible with a hook that lets me put <none> in the menu title?

Improve this question

4 Answers 4

Reset to default
1

If you use Icon API and Icon API:Menu submodule, You can just put <none> in the text field of the menu item. fontawesome icons are available in the menu item properties with this module.

Improve this answer
2

No need to resort to "dirty CSS tricks", you can just use clean CSS:

a.class {
  display: inline-block; // Or block if it makes more sense for your layout.
  text-indent: -9999em;
}

This is the correct way to handle it, as you can include proper text as your link (e.g. "Home"), so you're not alienating users with screen readers, etc.

Improve this answer
7
  • Unfortunately that makes the home icon disappear as well.
    – the
    Commented May 27, 2014 at 15:39
  • ah, because it's using awesomefont, so the image is part of the text. duh. Can't you use a regular bg image? Or you could have a :after {content: ... position: absolute}
    – donquixote
    Commented May 27, 2014 at 15:41
  • Right, I guess your icon's in a <i>/<b> tag or something? General wisdom would be to put that as a background image on the <a> itself. You'll either need to use CSS to solve it (absolute position on the <b> tag within the <li>, for example), or you'll need to change the markup so you can better target the <a> and its contents with CSS. There's no half-measure, Drupal won't be able to provide you with a solution unfortunately
    – Clive ♦
    Commented May 27, 2014 at 15:44
  • maybe position: absolute on the <i> ?
    – donquixote
    Commented May 27, 2014 at 15:50
  • @donquixote Yeah that would work, but we're more into the realms of "tricks" with that I think :)
    – Clive ♦
    Commented May 27, 2014 at 15:53
2

What about

<a href="/" class="">
  <i class="icon-home" style="text-indent: -1000px;">
    This is the homepage
  </i>
</a>
Improve this answer
2
  • This would be the ideal solution, but I imagine there'll be some coding involved to override fontawesome's theme functions
    – Clive ♦
    Commented May 27, 2014 at 15:45
  • It's a good solution but that leaves open where to put it. Now it's using TB Mega Menu but the idea is to get rid of that bloat.
    – the
    Commented May 29, 2014 at 18:19
0

You can use FontAwesome menu icons module in Drupal 8.

After enable it, you get new options in each menu-item edit page:

  • A field for setting a fontawesome icon writting the code (fa-user, fa-sign-out,...)
  • Another field ("FontAwesome Icon - Appearance") where you can select "Without text" for an empty title.
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.