Joomla 3.x. How to replace FontAwesome icons with images

This tutorial is going to show you how to replace FontAwesome icons with images in Joomla 3.x.

Joomla 3.x. How to replace FontAwesome icons with images.

To follow the steps below, you will need to use the Firefox browser and its Firebug ad-on.

1. Open your admin panel Content -> Media Manager and click Upload button to upload an image icon you want to use instead of an iconic font.
2. Now you need to locate the icon CSS code to edit it ( the following tutorial will guide you step by step how to find a code required by the Firebug ad-on ). Open the page and right click the icon we need to update, then press Inspect Element with Firebug button. You can see the icon CSS code on the right side of a firebug panel: template.css (line741).

   Note that you may have different file and line number.

    .blocks.color4 h3:before {
       content: "\f05b";
   }

   

3. Follow your FTP templates/themeXXXX/css/template.css file, line 741 and change the code to:

   .blocks.color4 h3:before {
       background: url('your_image_url_here') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
   }

4. Now you need to replace your_image_url_here with your icon image URL. Follow your admin panel Content -> Media Manager , open the icon image you want to use, right click it and copy the image location.
5. Insert the image link instead of your_image_url_here in the code:

   .blocks.color4 h3:before {
       background: url('http://mysite.com/images/icon.jpg') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
   }

6. Save the changes and refresh your home page to check a new icon image appearing. The icon is successfully added now.

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to replace FontAwesome icons with images.