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>

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?


4 Answers 4


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:




<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.

enter image description here


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.


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.


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:

enter image description here

  • This adds the class the the element containing the menu item text. For example <a class="icon-cog" href="/">Home</a>. So, if the icon has a pre-defined width, this will apply the width to the menu item. With the Protostar template, add icon-cog or something similar and you will see what I mean
    – Lodder
    Oct 13, 2014 at 15:26
  • Protostar doesn't use Fontawesome and it's implementation of icon fonts is can be described as sub-optimal at best. Fontawesome uses a much more sensible syntax and as I've this method on dozens of projects I'm well aware of the effect. Oct 13, 2014 at 17:30

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.