Categories

Featured templates

Joomla 3.x. How to replace menu text with the image

Ammy Brown January 25, 2016
Rating: 4.2/5. From 6 votes.
Please wait...

This tutorial will show you how to use images instead of the text in Joomla menu items.

Joomla 3.x. How to replace menu text with the image

There are several ways of adding icons to the menu:

Adding images to the menu using Menu Manager

Default Joomla menu module allows you to change menu titles to images:

  1. Log into your Joomla admin panel.

  2. Navigate to Menus > Main Menu.

  3. In the next step, click any menu item to modify it:

    Joomla_3.x._How_to_replace_menu_text_with_an_image_1

  4. Change your menu item type to External Link.

  5. Locate Link type options section.

  6. Set Add Menu Title to No.

  7. Use Select button to choose your image.

  8. Click Save button to apply the changes and check your site:

    Joomla_3.x._How_to_replace_menu_text_with_an_image_2

Adding images using CSS code

The second method is based on adding css class with the image to the templates/theme###/css/templates.css file (where ### is your theme number). Some Joomla menu modules, such as IceMegaMenu Module, do not allow you to add image to the menu item from admin panel. You can add image using css code:

  1. Using background image in css code:

    1. Open the site in your browser and use the Inspect Element tool to find custom css class you will need to add for your menu item:

    2. Copy css class your locate. Usually, css code looks as follows:

      #iceMenu_### .iceMenuTitle:before {
        content: url("image_link_here") !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      Where ### is your menu ID. You can locate your menu items IDs in your admin panel. Under Menus > Main Menu section:

      Joomla_3.x._How_to_replace_menu_text_with_an_image_3

      And image_link_here is the link for your menu image.

    3. Connect to your server using FTP or hosting Cpanel.

    4. Locate templates.css file in templates/theme###/css folder on your server. Open the file in any code editor on your computer.

    5. Add your custom css class at the end of templates.css file.

    6. Save the file, upload it back to your server and check the result on your site.

  2. Using FontAwesome icons:

    1. Inspect your site using the Inspect tool to locate custom css class.

    2. Edit the same templates/theme###/css/templates.css file (where ### is your theme number).

    3. the CSS code you need to add to the template.css file usually looks as follows:

      #iceMenu_101 .iceMenuTitle:before {
        font-family: FontAwesome !important;
        content: "###" !important;
        font-size: 45px !important;
        top: 20px !important;
        position: relative !important;
        display: inline-block !important;
        line-height: 45px !important;
        height: 90px !important;
        }
        
      #iceMenu_101 .iceMenuTitle {
        font:0/0 a !important;
        }
      

      Where ### is your FontAwesome icon class. The list of all available icons can be found at FontAwesome site.

    4. Do not forget to save the file and upload it to your server.

    5. Check your site to see the changes.

Now you know how to use images instead of the text in Joomla menu items.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to replace menu text with the image

Templates for Joomla
This entry was posted in Joomla! Tutorials and tagged image, joomla, menu, replace, text. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket