Categories

Featured templates

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

Amina Freinger August 12, 2015
Rating: 5.0. From 1 vote.
Please wait...

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:

joomla_3_replace_fontawesome_icons_via_css_code1

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";
    }

    joomla_3_replace_fontawesome_icons_via_css_code2

    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):

    joomla_3_replace_fontawesome_icons_via_css_code3

    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:

    joomla_3_replace_fontawesome_icons_via_css_code4

  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:

    joomla_3_replace_fontawesome_icons_via_css_code5

  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:

    joomla_3_replace_fontawesome_icons_via_css_code6

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

    We can see the icon was changed successfully:

    joomla_3_replace_fontawesome_icons_via_css_code7

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)

Buy Joomla Templates
This entry was posted in Joomla! Tutorials and tagged fontawesome, icon, joomla. 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

Live Chat
We help you to choose the right product.