Joomla 3.x. How to replace Font Awesome icons (by changing their code)

In this tutorial you will learn the way to replace Font Awesome icons by changing their code in Joomla 3.x. templates.

Joomla 3.x. How to replace Font Awesome icons (by changing their code)

Icons you can see on the screenshot below are represented by Font Awesome icons:

That icons are loaded via CSS code. To change the Font Awesome icons you should perform the following steps:

1. Inspect the required icon using Firebug developer software. You can find more information on how to use Firebug here. In our case the icon is loaded via the following CSS code from template.css file:

   .location .address:before {
     content: "\f015";
   }

   

   Note: In the Firebug window the "content" attribute value of the CSS code could be represented as a little square (it’s caused by the Firebug add-on functionality), however it will look well in the CSS file itself.

2. Now you should open template.css file to edit that CSS code in it. You can access CSS files via the Joomla admin panel (Extensions -> Template Manager -> Templates -> select your theme from the list -> open CSS folder from the left list) or via FTP or File Manager (templates/themeXXXX/css/ directory on your server, where XXXX is the number of your theme).

3. Before editing CSS code you should check the Font Awesome version used in your template. You can see it in the top of your opened CSS file (see the screenshot below):

   

   Note: Be sure to specify icons of the Font Awesome version used in your template. Otherwise they will not show up.

4. You can use search engine in order to find icons of appropriate version of Font Awesome. Just perform search using the following keywords: Font Awesome 4.3.0 Cheatsheet. Please note that 4.3.0 is the version of Font awesome icons (your template may have another Font Awesome icons version). Open the first link from the search results:

   

5. We can see a list of icons and appropriate icon codes. Let’s change our icon to fa-bank icon. Copy part of the selected icon code. Your icon should have code like f19c:

   

6. Then find the required CSS rule in the opened template.css file (you can check the code line in Firebug window; it is the line 12810 in our case). Then paste icon code into your CSS rule with the backslash at the beginning. In our case the modified CSS rule looks like on the screenshot below:

   

7. Save the changes in the file and refresh your page to see the changes.

   We can see the icon was changed successfully:

   

This is the end of the tutorial. Now you know how to replace Font Awesome icons by changing their code in Joomla 3.x. templates.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to replace Font Awesome icons (by changing their code)