Joomla 3.x. How to change the logo icon (if it is set as the Font Awesome icon)

Hello! This video tutorial shows how to change the logo icon in Joomla templates (if it is set as the Font Awesome icon).

The logo in your Joomla template may be set as the iconic font icon and not as an image:

Let’s learn how to change it.

As you can see the logo consists of two parts – the icon itself and the logo text.

Use the Firebug extension for Firefox or the Developer’s tool of your favorite browser to inspect the logo:

As you can see the logo text is controlled by the module with the ID: 205 – Single Article Module, which means there is an article in your admin panel where the text of the logo can be edited.

Let’s change the logo text now.

The tutorial assumes you are already logged into your Joomla administration panel.

1. Navigate to Content ->Article Manager tab:

   

2. Use the CTRL+F/CMND+F key (Windows OS/Mac OS) to find the “logo” article.

3. Now click on the article title to open it for editing – you will see the logo text at the appeared article editing interface:

   

4. Change the logo text to the desired one and click green “Save” button at the upper left of the screen:

   

Now that the logo text is changed, let’s replace the icon with your own one.

Navigate to your site front-end and get back to the Developer’s tool to inspect the logo.

The logo icon is set using the following CSS property in the template.css file:

content: "\f030";

Replace the icon code with the desired one from the Font Awesome snippet list:

In case you would like to replace the icon with your own image/icon, replace the previously mentioned CSS property with the following:

content: url("FULL_PATH_TO_YOUR_IMAGE_GOES_HERE");

Where FULL_PATH_TO_YOUR_IMAGE_GOES_HERE text is the direct path to the desired image on your server, e.g. http://yoursite.com/joomla/images/logo-image.png

You may also change the red circle background color by editing the following CSS property:

border-color: #e74c3c;

Make sure to save the template.css file after your finish editing and refresh the page to see changes.

You can see the logo icon has been successfully changed:

This is the end of the tutorial. You have learnt how to change the logo icon in your Joomla template (if it is set as the Font Awesome icon).

Feel free to check the detailed video tutorial below: