This tutorial is going to instruct you how to change flaticons in your Joomla 3.x theme.
- Log into your Joomla admin panel using the login module. It’s usually located on the right side of your homepage.
- Inspect an icon using Mozilla Firefox add-on Firebug or any other developer’s tool.
- Locate icons stylesheet and open it in a new tab (Usually icon code look like : <i class=”fl-justicons-first40 “></i>: : before. Press “: : before” pseudo-element to see the css rule and its source file ). In our case, it is fl-justicons.css file, located in templates/themeXXX/css/fl-justicons.css folder (where XXX stands for theme number).
- Open this file in a new tab to locate “source package” of your icons. In our case, it is https://www.flaticon.com/packs Open this link in a new tab and press Download pack button on the right side
- Extract archive downloaded and navigate to “png” folder. Choose an icon you’d like to set instead of existing one and copy its filename
- Go to your website, press the gear wheel in the top right corner of the article and click on Edit button. Navigate to Images and links tab and change Caption field value (highlighted part only)
- Change icon class. For example fl-justicons-first40
- Save changes and check your website, the icon was changed successfully! In order to add an icon, just specify it in a caption field for the needed article the similar way.
