Choose any Font Awesome icon and use it to easily customize the main navigation items, the titles of the modules, the button elements or the text inside the articles or custom type HTML Joomla! modules!

How to add icons to the main navigation items

Choose any icon from Font Awesome and insert the name of the icon into the LINK CSS STYLE field in the LINK TYPE tab of the menu item. If you do not want to use any icon for the main navigation item, then simply leave this field blank:

How to customize the icons inside the main navigation using the template's settings

Customize the color and font size of the icons for the main navigation by using the SETTINGS tab from the template's settings:

How to add icons to the title of the module

Choose any icon from Font Awesome and insert the name of the icon in the HEADER CLASS field in the Advanced tab of the module. If you do not want to use any icon for the title of the module, then simply leave the Header Class field blank.

How to add icons to buttons

To use the Font Awesome icons with the button styles, insert the following code into your text editor:

To use the icons with the button styles, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button. SInce the default Joomla! editor strips the <i> tags, use the EDITOR NONE setting inside the Global Configuration to save the icon elements.

How to add icons inside articles and modules

To use any Font Awesome icon inside the articles or custom type HTML Joomla! modules, insert the following code into your text editor:

<i class="fas(or far/fab) fa-name"></i>

To use the icons with the articles and modules, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button. SInce the default Joomla! editor strips the <i> tags, use the EDITOR NONE setting inside the Global Configuration to save the icon elements.