T3 offers powerful control over the Joomla menu configuration and display layout via it's megamenu. One of the features of a megamenu is the ability to add icons to your menu items and so today we are going to look at to use a megamenu editing interface to add an icons to your menu items.

1. Start by opening the template configuration. Click on the default template title in the Template manager.

1. Click on the Megamenu button in the toolbar of the template configuration screen.

T3 Megamenu configuration

On the Megamenu configuration screen, you will see the menu items just under the “item Configuration” area.

1. Click on the menu item under which you would like to add an icon.

1. For that menu item, click in the Icon text box in the “Item Configuration” area.

1. Input the name of the icon that you would like to show before the menu title for that specific menu item.

Full list of all available icons that you can use with this Icon parameter can be found on the Font Awesome site.

1. You can immediately see the icon on the menu item if you remove focus from the Icon parameter text box (click anywhere else in the empty area of the Megamenu editing interface page)

Finish adding an icon to the selected menu item by clicking on the Save button in the Megamenu editing page toolbar.

Frontend of the website

Load a frontend of the website and check if you can see newly added icon for a selected main menu item as seen on the following screenshot

What's next

As you can see, it is extremely easy to add an icon to a specific menu item on your T3 web site if you already have the font awesome font library loaded. Please note that users of Joomlabamboo t3 templates need to ensure that the JB Type plugin is installed an enabled for the fonts to work.

Normally when adding extra stuff to your website you are warned to not do too much otherwise the performance of the website will suffer. Font Icons are an exception to this rule as they are consist of a single asset. So there is no intrinsic performance impact when using font icons whether you are using one icon or one hundred. Of course you still need to exercise caution from a design point of view however that is of course entirely up to you.

blog comments powered by Disqus