Add html in menu title field

Question

This is my need, I want to add an html tag to the menu title. I want to add some icons in front of each menu title in the frontend.

I want this result:

<li class="active">
 <a href="index.html">
  <i class="fa fa-dashboard"></i>
  Dashboard
 </a>
</li>

When I try to add the <i class="fa fa-dashboard"></i> in the menu title field Joomla's filter removes it.

Is there any way to store that and display in the menu module?

Thanks.

Answer 1

As @Valentin pointed out, a menu override is the correct way to solve this. However, if you're not familiar with Joomla overrides and PHP, a quick alternative is to use RokCandy (or any other snippet extension). Basically, these plugins will replace your non-HTML code with HTML code, thus avoiding the Joomla filters.

To achieve what you're trying to do using RokCandy, create a new macro:

Macro

[fa]{icon}[/fa]

HTML

<i class="{icon}"></i>

Save and close your macro. Now in your menu item, set the title to this:

[fa]fa fa-dashboard[/fa] Dashboard

Finally, you have to set the Alias and Browser Page Title fields (under Page Display) to "Dashboard" (or whatever you want), or your browser title will be [fa]fa fa-dashboard[/fa] Dashboard.

Answer 2

If your template supports it, you should have numeric class ids for each menu item. If you have that, or if you can add that to your template/menu, it's probably safer to just use CSS and style those menu items that way.

So if your menu item is say class 155 it would likely appear in the li line as:

<li class="active item155">

So then, again, following your structure, you'd do something like this in your CSS:

li.item155 a i:before {font-family:FontAwesome;content: "\f0ce";}

Where that \f0ce is the font awesome code for that icon you want.

If you don't have those menu id's you could fudge it with li:nth-child(x) where x is the menu item in order from first to last. So to style menu item number 3, you do this:

li:nth-child(3) a i:before {font-family:FontAwesome;content: "\f0ce";}

If you use that, I'm not sure how far back it works with browsers, but it means you don't have to override a thing.

Answer 3

No, you don't need to add HTML to a menu item. Sometimes when Joomla removes stuff for you is because you should not do it like that (even if it was much simpler).

What you need is a template override for mod_menu.

Read more on template overrides in the documentation: How to override the output from the Joomla! core.

Answer 4

The correct way to achieve this is actually the easiest and requires no plugins or overrides, just add the icon class to the link in the menu item options: